对象的情况下 用这种方法
<div id="box"> <input type="text" v-model="myText"> <!-- 用名字检索 --> <div v-for="site in list" v-if="site.name.indexOf(myText)!=-1"> <!-- indexOf检索!字符串!是否出现,没有检索到就返回-1 --> <!-- v-if 如果是true就显示 // false就是隐藏 --> <!-- 如果项名字和价格一起检索的话用 || 或--> <!-- v-if="site.price.indexOf(myText)!=-1 || site.name.indexOf(myText)!=-1" --> {{site.name}} {{site.price}} </div> js------------------------ data:{ list:[ {name:'aa',price:'100'}, {name:'bb',price:'200'}, {name:'cc',price:'300'} ], myText:'', },
字符串的情况下 用这种方法
<div id="box">
<input type="text" v-model="myText">
<p v-for="data in getDataList">{{data}}</p>
</div>
js========================
data: {
myText: "",
dataList: ['奔驰', '宝马', '宾利', '法拉利'],
},
computed: {
getDataList() {
return this.dataList.filter(item => item.indexOf(this.myText) > -1)
}
},