这里介绍两种方法：1、使用watch侦听方法 2、computed计算属性方法
页面结果：
第一种
<body><divid="app"><!-- 搜索框 --><inputtype="text"v-model:value="keyword"><!-- 数据，遍历filPerson--><ul><liv-for="p in filPerson":key="p.id">{{p.name}}-{{p.age}}</li></ul></div><script>var vm=newVue({el:'#app',data:{keyword:'',persons:[{id:1,name:'知花实央',age:20},{id:2,name:'虎杖悠仁',age:18},{id:3,name:'切嗣',age:16},{id:4,name:'卫宫切嗣',age:33}],filPerson:[]},//第一种写法watch:{keyword:{//初始化，在生成vue时，先执行一遍handlerimmediate:true,//作用：刚开始filPerson为空，所以要先给filPerson赋一次值handler(val){//person中包含val数据，赋值给filPersonthis.filPerson=this.persons.filter((p)=>{return p.name.indexOf(val)!=-1})}}}//第二种写法// computed:{// filPerson(){// return this.persons.filter((p)=>{// return p.name.indexOf(this.keyword)!=-1// })// }// }})</script></body>
第二种
相较于watch写法，computed写法看上去更加简洁，比如：
1、computed自身就是一种计算属性，不必再去data中新建一个属性。
2、计算属性实时更新，不用像watch方法，新建的filPerson初始值为空,还需要手动开启设置immediate=true初始化，令handler在vue实例创建后先运行一次，赋予初始值。
<body><divid="app"><!-- 搜索框 --><inputtype="text"v-model:value="keyword"><!-- 数据 --><ul><liv-for="p in filPerson":key="p.id">{{p.name}}-{{p.age}}</li></ul></div><script>var vm=newVue({el:'#app',data:{keyword:'',persons:[{id:1,name:'知花实央',age:20},{id:2,name:'虎杖悠仁',age:18},{id:3,name:'切嗣',age:16},{id:4,name:'卫宫切嗣',age:33}],// filPerson:[]},//第一种写法// watch:{// keyword:{// //初始化，在生成vue时，先执行一遍handler// immediate:true,//作用：刚开始filPerson为空，所以要先给filPerson赋一次值// handler(val){// //过滤掉不包含keyword数据，再赋值给filPerson// this.filPerson=this.persons.filter((p)=>{// return p.name.indexOf(val)!=-1// })// }// }// }//第二种写法computed:{filPerson(){returnthis.persons.filter((p)=>{return p.name.indexOf(this.keyword)!=-1})}}})</script></body>
其实watch方法和computed方法各有优劣，computed方法自己就是一种计算属性，很多时候直接给自己赋值，省去很多代码；但是watch方法能够做到跟多的细节操作，甚至computed能实现的，它都能实现，还能实现更多computed实现不了的细节。
本文转载自: https://blog.csdn.net/y17757773039/article/details/127637001
版权归原作者 y17757773039 所有， 如有侵权，请联系我们删除。
版权归原作者 y17757773039 所有， 如有侵权，请联系我们删除。