标签：Vue name gender age 列表 persons 过滤 id
文章目录
列表过滤，可以用以下两种方法实现，
- 使用watch。
- 使用computed。
使用watch
- 第一次实现
<body>
<div id="root">
<input type="text" v-model="keyWord">
<ul>
<li v-for="(p,index) of persons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.gender}}-{{index}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
keyWord:'',
persons:[
{id:"001",name:"周冬雨",age:18,gender:"女"},
{id:"002",name:"马冬梅",age:19,gender:"女"},
{id:"003",name:"张桂梅",age:19,gender:"女"},
{id:"004",name:"周杰伦",age:20,gender:"男"}
]
},
watch:{
keyWord:{
handler(val){
this.persons = this.persons.filter((p) => {
return p.name.indexOf(val)!==-1;
})
}
}
}
})
</script>
</body>
- 第二次实现
添加了filterPersons。
<body>
<div id="root">
<input type="text" v-model="keyWord">
<ul>
<li v-for="(p,index) of filterPersons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.gender}}-{{index}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
keyWord:'',
persons:[
{id:"001",name:"周冬雨",age:18,gender:"女"},
{id:"002",name:"马冬梅",age:19,gender:"女"},
{id:"003",name:"张桂梅",age:19,gender:"女"},
{id:"004",name:"周杰伦",age:20,gender:"男"}
],
filterPersons:[]
},
watch:{
keyWord:{
handler(val){
this.filterPersons = this.persons.filter((p) => {
return p.name.indexOf(val)!==-1;
})
}
}
}
})
</script>
</body>
- 第三次实现
添加了immediate:true，一刷新页面就调用回调。
<body>
<div id="root">
<input type="text" v-model="keyWord">
<ul>
<li v-for="(p,index) of filterPersons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.gender}}-{{index}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
keyWord:'',
persons:[
{id:"001",name:"周冬雨",age:18,gender:"女"},
{id:"002",name:"马冬梅",age:19,gender:"女"},
{id:"003",name:"张桂梅",age:19,gender:"女"},
{id:"004",name:"周杰伦",age:20,gender:"男"}
],
filterPersons:[]
},
watch:{
keyWord:{
immediate:true,
handler(val){
this.filterPersons = this.persons.filter((p) => {
return p.name.indexOf(val)!==-1;
})
}
}
}
})
</script>
</body>
使用computed
<body>
<div id="root">
<input type="text" v-model="keyWord">
<ul>
<li v-for="(p,index) of filterPersons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.gender}}-{{index}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
keyWord:'',
persons:[
{id:"001",name:"周冬雨",age:18,gender:"女"},
{id:"002",name:"马冬梅",age:19,gender:"女"},
{id:"003",name:"张桂梅",age:19,gender:"女"},
{id:"004",name:"周杰伦",age:20,gender:"男"}
],
},
computed:{
filterPersons(){
return this.persons.filter((p) => {
return p.name.indexOf(this.keyWord)!==-1;
})
}
}
})
</script>
</body>
标签：Vue,name,gender,age,列表,persons,过滤,id 来源： https://blog.csdn.net/qzw752890913/article/details/122722622
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。