<template><div><input type="text" v-model="searchId" placeholder="搜索"><table class="tab"><tr><th>序号</th><th>名字</th><th>时间</th></tr> //遍历这里用newlist , 不要用list; 切记!!!!!<tr v-for="(item,index) in newlist" :key="index"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.ctime}}</td></tr></table></div></template><script>export default {data () {return {searchId:"",list:[{id:1,name:"cc",ctime:new Date()},{id:2,name:"zs",ctime:new Date()},{id:3,name:"ss",ctime:new Date()}],}},computed:{newlist(){//1. 常规做法//var that=this//function iscontainer(value){// return value.name.indexOf(that.searchId)!==-1//}//var temlist=this.list.filter(iscontainer)//iscontainer是一个函数，value就是list中的每一项的值,通过判断是否包含来来过滤数据内容//return temlist// }//2.es6做法 // filter为在list的基础上创建一个新的数组,不会改变原数组 //这里的name是上方数组中的namereturn this.list.filter(value=>value.name.indexOf(this.searchId)!==-1) }}}</script>
