今天学习了一个小知识,列表过滤。
过滤方法有,以下几种:
主体:
//1.引入
<script type="text/javascript" src="../js/vue.js"></script>
//2.页面
<div id="root">
<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
<li v-for="(p,index) of filFoodList" :key="index" >
{{p.id}}-{{p.name}}-{{p.type}}
</li>
</ul>
</div>
方法一:用watch实现
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: '#root',
data: {
keyWord: '',
filFoodList:[],
foodList: [
{ id: '001', name: '白菜', type: '蔬菜' },
{ id: '002', name: '萝卜', type: '蔬菜' },
{ id: '003', name: '丝瓜', type: '蔬菜' },
{ id: '004', name: '苹果', type: '水果' },
{ id: '005', name: '香蕉', type: '水果' }
]
},
watch:{
keyWord:{
// immediate在watch里面声明了之后会立马执行handler里面的函数
immediate:true,
// 没输入就是空串,空串就是都包含
handler(val){
this.filFoodList=this.foodList.filter((p)=>{
// 是否包含字符
return p.name.indexOf(val) !== -1
})
}
}
}
})
</script>
方法二:用computed实现
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: '#root',
data: {
keyWord: '',
foodList: [
{ id: '001', name: '白菜', type: '蔬菜' },
{ id: '002', name: '萝卜', type: '蔬菜' },
{ id: '003', name: '丝瓜', type: '蔬菜' },
{ id: '004', name: '苹果', type: '水果' },
{ id: '005', name: '香蕉', type: '水果' }
]
},
computed:{
filFoodList(){
return this.foodList.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1
})
}
}
})
</script>