<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="../libs/vue1026.js"></script>
</head>
<style>
#app {
width: 800px;
margin: 20px auto;
}
#tb {
width: 800px;
border-collapse: collapse;
margin: 20px auto;
}
#tb th {
background-color: #0094ff;
color: white;
font-size: 16px;
padding: 5px;
text-align: center;
border: 1px solid black;
}
#tb td {
padding: 5px;
text-align: center;
border: 1px solid black;
}
</style>
<body>
<div id="app">
<input type="text" v-model="name">
<button @click="addData">添加数据</button><br>
<input type="text" placeholder="请输入筛选内容" v-model="uname">
<table id="tb">
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
<tr v-if="list.length==0">
<td colspan="4">当前已经没有数据</td>
</tr>
<tr v-for="item in list | filterBy uname in 'name'">
<td>{{$index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td><a href="javascript:;" @click="remove($index)">删除</a></td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
list:[
{name:'宝马',ctime:new Date()},
{name:'奔驰',ctime:new Date()}
],
name:'',
uname:''
},
methods:{
addData:function(){
var str = {name:this.name,ctime:new Date()};
this.list.push(str);
this.name="";
},
remove:function(id){
this.list.splice(id,1)
}
}
})
</script>
</html>
