通过计算属性添加列表搜索条件

<li v-for="(p,index) of filGoods" :key="index">
{{g.name}}-{{g.price}}
</li>
 
data:{
  keyWord:'',
  goods:[
    {id:'1',name:'苹果',price:'5'},
    {id:'2',name:'香蕉',price:'10'},
    {id:'3',name:'西瓜',price:'8'},
    {id:'4',name:'芒果',price:'20'},
        ]，
 
},
 
computed:{
    filGoods(){
    return this.goods.filter((g)=>{
      return g.name.indexOf(this.keyWord) !== -1   //等于-1代表字符串内没有搜索的元素。
})
}
},

filter 方法用来迭代一个数组，并且按给出的条件过滤出符合的元素。

filter 方法传入一个回调函数，这个回调函数会携带一个参数，参数为当前迭代的项。

回调函数返回 true 的项会保留在数组中，返回 false 的项会被过滤出数组。

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。