此案例可以分为4个部分：
- 渲染学生列表
- 新增学生
- 删除学生
- 搜索学生
涉及的知识点主要为v-model双向绑定数据。
页面：
<div id="main">
<table>
<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="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="button" value="新增" @click="add"/></td>
<td><input type="text" placeholder="搜索学生姓名" v-model="keywords"/></td>
</tr>
</table>
</div>新增学生：
add() {
var stu = {
id: this.id,
name: this.name,
time: new Date()
}
this.list.push(stu)
this.id = this.name = ''
}删除学生：
del(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
}完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="main">
<table>
<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="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="button" value="新增" @click="add"/></td>
<td><input type="text" placeholder="搜索学生姓名" v-model="keywords"/></td>
</tr>
</table>
</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
list: [{
id: 1,
name: '小明',
time: new Date()
},
{
id: 2,
name: '大黄',
time: new Date()
}
],
keywords: '',
id: '',
name: '',
}
},
methods: {
search(keywords) {
var newList = []
this.list.forEach(item=>{
if(item.name.indexOf(keywords)!=-1) {
newList.push(item)
}
})
return newList
},
add() {
var stu = {
id: this.id,
name: this.name,
time: new Date()
}
this.list.push(stu)
this.id = this.name = ''
},
del(i) {
this.list.splice(i,1)
}
}
}).mount('#main')
</script>
</body>
</html>
