通过学生管理案例，巩固vfor数据渲染、vmodel双向数据绑定以及事件修饰符等知识点。
需求分析：1. 渲染学生列表 2. 新增学生 3. 删除学生 4. 搜索学生
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="main" v-cloak>
<table cellpadding="0" cellspacing="0">
<tr>
<td>学号</td>
<td>姓名</td>
<td>新增时间</td>
<td>操作</td>
</tr>
<tr v-for="(item, i) in search(keywords)" :key="i">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.time}}</td>
<td><a @click.prevent="del(i)">删除</a></td>
</tr>
<tr>
<td><input type="text" placeholder="请输入学号" v-model="id" /></td>
<td><input type="text" placeholder="请输入姓名" v-model="name" /></td>
<td><input type="text" placeholder="搜索学生姓名" v-model="keywords" /></td>
<td><input type="button" value="新增" @click="add"/></td>
</tr>
</table>
</div>
<!-- 安装Vue.js -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<script>
var vm = new Vue ({
el: '#main',
data: {
id: '',
name: '',
keywords: '',
list: [{
id: 1,
name: '小明',
time: new Date()
}, {
id: 2,
name: '小红',
time: new Date()
}, {
id: 3,
name: '小刚',
time: new Date()
}]
},
methods: {
add() {
var stu = {
id: this.id,
name: this.name,
time: new Date()
}
this.list.push(stu)
this.id = this.name = ''
},
del(i) {
console.log(i)
this.list.splice(i, 1)
},
search(keywords) {
var newList = []
this.list.forEach(item => {
if (item.name.indexOf(keywords) != -1) {
newList.push(item)
}
})
return newList
}
}
})
</script>
</body>
</html>
运行代码：
