前端考前复习阶段练习题（一）
练习题二见 前端考前复习阶段练习题（二）
- 运用所学的Vue的知识，编写程序，按要求完成下列内容。要求如下：（1）在根实例中创建数组，名为items，其内包含四个元素，分别是语文、数学、英语和物理；（2）使用v-for指令遍历数组，并通过无序列表的形式显示在网页上
<!DOCTYPE html>
<html>
<head>
<title>v-for遍历数组</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in items">
{{ item }}
</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
items: ['语文', '数学', '英语', '物理']
}
})
</script>
</body>
</html>
- 效果：
后记：这道题考了原题
- 运用所学的DOM编程的知识，编写程序，按要求完成下列内容，实现动态移动红色方格的功能。要求如下：（1）放入一个4行4列的表格，开始时第二行、第二列的单元格的背景色为红色，其余单元格背景色为白色；表格线为黑色，1像素；（2）放入四个按钮，分别是上移、下移、左移、右移；（3）点击按钮，实现红色单元格做相应移动的效果；（实现基本功能即可，测试点不需要加入）
<!DOCTYPE html>
<html>
<head>
<title>移动方格</title>
</head>
<body>
<table id="table" border="1px" bordercolor="black" cellpadding="30px" style="border-collapse:collapse;">
</table>
<input type="button" value="左" onclick="l()">
<input type="button" value="上" onclick="u()">
<input type="button" value="下" onclick="d()">
<input type="button" value="右" onclick="r()">
<script>
var arr = [];
var [x, y] = [1, 1];
var table = document.getElementById("table");
for (let r = 0; r < 4; r++) {
arr[r] = [];
var tr = document.createElement("tr");
for (let c = 0; c < 4; c++) {
var td = document.createElement("td");
arr[r][c] = td;
tr.appendChild(td);
}
table.appendChild(tr);
}
setRed();
function setWhite() {
arr[y][x].bgColor = "";
}
function setRed() {
arr[y][x].bgColor = "red";
}
function l() {
setWhite();
x = x > 0 ? x - 1 : x;
setRed();
}
function u() {
setWhite();
y = y > 0 ? y - 1 : y;
setRed();
}
function d() {
setWhite();
y = y < 3 ? y + 1 : y;
setRed();
}
function r() {
setWhite();
x = x < 3 ? x + 1 : x;
setRed();
}
</script>
</body>
</html>
- 效果：
后记：这道题考了原题
- 请运用Vue所学知识，完成如下表单组件的设计，给出相应的代码。
（1）完成元素布局
（2）创建一个Vue对象，在其内创建一个user对象，用以接收用户录入的相关信息，留待绑定另一端。
（3）在相关的表单元素标签内通过使用v-model指令，完成相关的绑定。
（4）模拟表单提交，在此，为了测试绑定是否成功，我们把user对象进行输出。我们将其作为一个新的div的内容输出在网页上。
<!DOCTYPE html>
<html>
<head>
<title>用户注册</title>
</head>
<body>
<div id="app">
<form>
<table>
<tr>
<td>
用户名：
</td>
<td>
<input type="text" v-model="user.username">
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="password" v-model="user.password">
</td>
</tr>
<tr>
<td>
性别：
</td>
<td>
<input type="radio" name="sex" value="男" v-model="user.sex">男
<input type="radio" name="sex" value="女" v-model="user.sex">女
</td>
</tr>
<tr>
<td>
邮件地址：
</td>
<td>
<input type="text" v-model="user.email">
</td>
</tr>
<tr>
<td>
密码问题：
</td>
<td>
<input type="text" v-model="user.question">
</td>
</tr>
<tr>
<td>
密码答案：
</td>
<td>
<input type="text" v-model="user.answer">
</td>
</tr>
<tr>
<td>
<input type="button" value="注册" @click="register">
</td>
<td>
<input type="reset" value="重填">
</td>
</tr>
</table>
</form>
<div>
{{ register() }}
</div>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
user: {
username: "",
password: "",
sex: "",
email: "",
question: "",
answer: ""
}
},
methods: {
register: function () {
return this.user;
}
}
});
</script>
</body>
</html>
- 效果：
- 阅读下列代码，给出程序运行结果
- 代码1
<body>
<div id="app">
<h1 v-show="yes">Yes!</h1>
<h1 v-show="no">No!</h1>
<h1 v-show="age >= 25">Age: {{ age }}</h1>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
yes: true,
no: false,
age: 20
}
})
</script>
</body>
- 结果
Yes!
后记：这道题考了，改了个数
- 代码2
<body>
<div id="app">
年龄: <input type="text" v-model="age">
<p v-if="info">{{info}}</p>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
age: 0,
info: ' '
},
methods: {
checkAge() {
if (this.age >= 18)
this.info = '已成年';
else
this.info = '未成年';
}
},
watch: {
age: 'checkAge'
}
});
</script>
</body>
- 结果
年龄: 0
未成年
- 代码3
<body>
<div id="app">
<p>{{message | uppercase | reverse}}</p>
</div>
<script src="vue.js"></script>
<script>
Vue.filter('uppercase', function (value) {
if (!value) return '';
value = value.toString();
return value.toUpperCase();
})
Vue.filter('reverse', function (value) {
if (!value) return '';
value = value.toString();
return value.split('').reverse().join('');
})
var vm = new Vue({
el: '#app',
data: {
message: 'hello world'
}
});
</script>
</body>
- 结果
DLROW OLLEH