vue中搜索功能（Vue关键字搜索功能（小案例））
这里介绍两种方法：1 、使用watch侦听方法 2 、computed计算属性方法
页面结果：
第一种
<body> <div id="app"> <!-- 搜索框 --> <input type="text" v-model:value="keyword"> <!-- 数据 ，遍历filPerson--> <ul> <li v-for="p in filPerson" :key="p.id">{{p.name}}-{{p.age}}</li> </ul> </div> <script> var vm=new Vue({ 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){ //person中包含val数据 ，赋值给filPerson this.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> <div id="app"> <!-- 搜索框 --> <input type="text" v-model:value="keyword"> <!-- 数据 --> <ul> <li v-for="p in filPerson" :key="p.id">{{p.name}}-{{p.age}}</li> </ul> </div> <script> var vm=new Vue({ 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(){ return this.persons.filter((p)=>{ return p.name.indexOf(this.keyword)!=-1 }) } } }) </script> </body>其实watch方法和computed方法各有优劣 ，computed方法自己就是一种计算属性 ，很多时候直接给自己赋值 ，省去很多代码；但是watch方法能够做到跟多的细节操作 ，甚至computed能实现的 ，它都能实现 ，还能实现更多computed实现不了的细节 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！