Vue列表功能
程序员文章站
2022-05-16 21:30:40
...
用Vue实现了列表功能，无数据时添加提示，添加item，删除item，按关键字筛选item
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<link rel="stylesheet" type="text/css" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="form">
编号:<input type="text" v-model="formData.id">
名称:<input type="text" v-model="formData.name">
<button v-on:click="addData">添加</button>
搜索：<input type="text" v-model="keywords">
</div>
<table class="table">
<th>编号</th>
<th>名称</th>
<th>创建时间</th>
<th>操作</th>
<tr v-show="list.length ==0">
<td colspan="4">列表无数据</td>
</tr>
<tr v-for="item in search(keywords)">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td><a href="#" v-on:click="delData(item.id)">删除</a></td>
</tr>
</table>
</div>
<script src="index.js"></script>
</body>
</html>.table{
width: 800px;
margin: 20px auto;
border-collapse: collapse;
}
.table th{
background: #0094ff;
color: white;
font-size: 16px;
border:1px solid black;
padding: 5px;
}
.table tr td{
text-align: center;
font-size: 16px;
padding: 5px;
border:1px solid black;
}
.form{
width: 800px;
width: 20px auto;
}
.form button{
margin-left: 10px;
}var vm = new Vue({
el:'#app',
data:{
list:[{id:1,name:'丰田',ctime:new Date},{id:2,name:'本田',ctime:new Date}],
//用户添加的数据
formData:{
id:0,
name:""
},
keywords:""
},
methods:{
addData: function(){
//将数据追加到list中
var p ={id:this.formData.id,name: this.formData.name,ctime:new Date()}
this.list.push(p);
//清空页面上的文本框中的数据
this.formData.id = 0;
this.formData.name = '';
},
delData:function(id){
// 提醒用户是否要删除数据
if (!confirm('是否要删除数据?')) {
//当用户点击取消按钮的时候，应该组织这个方法后面的代码继续运行
return;
}
//调用list.findIndex()方法根据传入的id获取到这个要删除的数据
var index = this.list.findIndex(function(item){
return item.id == id
});
//list.splice（待删除的索引，删除的元素个数）
this.list.splice(index,1);
},
search(keywords){
//根据关键字，进行数据的搜索，返回匹配的item
var newList = this.list.filter(item => {
//注意：ES6中，为字符串提供了一个新方法，叫做string.prototype.includes('要包含的字符串')
//如果包含，则返回true，否则返回false
if(item.name.includes(keywords)){
return item
}
})
return newList
}
}
})