1 <template> 2 <div> 3 <input type="text" v-model="searchId" placeholder="搜索"> 4 <table class="tab"> 5 <tr> 6 <th>序号</th> 7 <th>名字</th> 8 <th>时间</th> 9 <th>操作</th> 10 </tr> 11 <tr v-for="(item,index) in newlist" :key="index"> 12 <td>{{item.id}}</td> 13 <td>{{item.name}}</td> 14 <td>{{item.ctime}}</td> 15 <td><a href="#" @click="dele(index)">删除{{index}}</a></td> 16 </tr> 17 <!-- <tr v-if="list.length===0"><td colspan="4">已经没有数据了,请添加数据吧 123</td></tr> -->
18 </table> 19 </div> 20 </template> 21 22 <script> 23 export default { 24 data () { 25 return { 26 searchId:"", 27 list:[ 28 {id:1,name:"cc",ctime:new Date()}, 29 {id:2,name:"zs",ctime:new Date()}, 30 {id:3,name:"ss",ctime:new Date()} 31 ], 32 } 33 }, 34 computed:{ 35 newlist(){ 36 //1. 常规做法 37 // var that=this 38 // function iscontainer(value){ 39 // return value.name.indexOf(that.searchId)!==-1 40 // } 41 // var temlist=this.list.filter(iscontainer) 42 // iscontainer是一个函数,value就是list中的每一项的值,通过判断是否包含来来过滤数据内容 43 // return temlist 44 // } 45 //2.es6做法 46 return this.list.filter(value=>value.name.indexOf(this.searchId)!==-1) 47 48 } 49 } 50 } 51 </script> 52 53 <style> 54 55 56 </style>