该代码示例展示了如何使用Vue.js创建一个表格，包括数据绑定、搜索过滤功能以及对数据进行添加、编辑和删除的CRUD操作。用户可以输入关键字搜索姓名，点击按钮对表格中的条目进行编辑或删除，同时支持新增数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1px">
<p>
<input v-model="search" type="text"></input>
</p>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>专业</th>
<th>操作</th>
</tr>
<tr v-for="i in show">
<td>{{i.name}}</td>
<td>{{i.age}}</td>
<td>{{i.sex}}</td>
<td>{{i.professional}}</td>
<td>
<input type="button" value="编辑" @click="edit(i)"></input>
<input type="button" value="删除" @click="del(i.id)"></input>
</td>
</tr>
<tr>
<td>
<input type="text" placeholder="name" v-model="newdata.name"></input>
</td>
<td>
<input type="text" placeholder="age" v-model="newdata.age"></input>
</td>
<td>
<input type="text" placeholder="sex" v-model="newdata.sex"></input>
</td>
<td>
<input type="text" placeholder="professional" v-model="newdata.professional"></input>
</td>
<td>
<input type="button" value="保存" @click="save"></input>
</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#app',
data: {
search: '',
item: [
{ id: 1, name: '李四', age: 12, sex: '男', professional: '移动应用开发' },
{ id: 2, name: '王五', age: 14, sex: '男', professional: '跨境电商' },
{ id: 3, name: '张三', age: 16, sex: '女', professional: '软件技术' },
{ id: 4, name: '小黑子', age: 18, sex: '男', professional: '阿坤贴山靠' }
],
newdata: { id: 0, name: '', age: '', sex: '', professional: '' }
},
computed: {
show: function () {
var item = this.item
if (this.search == '') {
//显示所有
return item;
}
else {
//根据查询关键字来查询
var search = this.search.toLowerCase()
item = item.filter(function (item) {
if (item.name.toLowerCase().indexOf(search) != -1) {
return item;
}
})
return item
}
}
},
methods: {
del: function (id) {
if (confirm('确定删除吗')) {
for (var i = 0; i < this.item.length; i++) {
if (id == this.item[i].id) {
this.item.splice(i, 1);
}
}
}
},
save: function () {
if (this.newdata.id == 0) {
this.newdata.id = this.item.length + 1;
this.item.push(this.newdata)
}
this.newdata = { id: 0, name: '', age: '', sex: '', professional: '' }
},
edit: function (i) {
this.newdata = i;
}
}
})
</script>
</body>
</html>
扫一扫
6297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
