vue中简单的模糊查询--过滤数组对象
<div id="box"><input type="text" v-model="keyword1"/><ul><li v-for="value in fSearch"><img :src="value.img" alt=""><p>{{value.name}}</p></li></ul>
·
<div id="box">
<input type="text" v-model="keyword1"/>
<ul>
<li v-for="value in fSearch">
<img :src="value.img" alt="">
<p>{{value.name}}</p>
</li>
</ul>
</div>
keyword1 : '',
list : [
{
"name":"李一",
"img":"../../../../static/img/close.png"
},
{
"name":"李二",
"img":"../../../../static/img/close.png"
},
{
"name":"索一",
"img":"../../../../static/img/close11.png"
},
{
"name":"张二",
"img":"../../../../static/img/down.png"
},
],
computed : { //设置计算属性
fSearch(){
if(this.keyword){
return this.list.filter((value)=>{ //过滤数组元素
return value.name.includes(this.keyword); //如果包含字符返回true
});
}
}
}
更多推荐
已为社区贡献9条内容
所有评论(0)