Vue实现简单的表格增加删除搜索
<!DOCTYPE html>
<html lang="zh">
<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">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<div id="">
<label for="">ID:<input type="text" v-model="id"></label>
<label for="">Name:<input type="text" v-model="name"></label>
<button @click="add">添加</button>
<label>搜索<input type="text" v-model="keywords"></label>
</div>
<table class="table table-bordered">
<tr>
<td>Id</td>
<td>Name</td>
<td>Ctime</td>
<td>Operation</td>
</tr>
<tr v-for="item in search(keywords)" :key='item.id'>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td><a href="#" @click.prevent="del(item.id)">删除</a></td>
</tr>
</table>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
id : '',
name: '',
keywords:'',
list:[
{id:1 , name:"徐州" , ctime : new Date},
{id:2 , name:"苏州" , ctime : new Date},
{id:3 , name:"宿迁" , ctime : new Date}
]
},
methods:{
add:function(){
var addList = {id:this.id , name:this.name , ctime: new Date};
this.list.push(addList)
this.id = this.name = ""
},
del:function(id){
this.list.some((item,i)=>{
if(item.id == id){
this.list.splice(i,1)
return true
}
})
},
search:function(keywords){
var newList = [];
this.list.forEach(item=>{
if(item.name.indexOf(keywords) != -1){
newList.push(item)
}
})
return newList
}
}
})
</script>
</body>
</html>
