Vue关键字搜索功能(小案例)
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
这里介绍两种方法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实现不了的细节。
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |