前端考前復習階段練習題（一）
練習題二見 前端考前復習階段練習題（二）
- 運用所學的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