博客

<li v-for="(p,index) of filGoods" :key="index">
{{g.name}}-{{g.price}}
</li>

data:{
  goods:[
    {id:'1',name:'苹果',price:'5'},
    {id:'2',name:'香蕉',price:'10'},
    {id:'3',name:'西瓜',price:'8'},
    {id:'4',name:'芒果',price:'20'},
        ]，
   filGoods:[],//因为通过watch监听去查询，数组会直接被改变。所以，定义一个空数组去监听此改变。
},

watch:{
  keyWord(val){
    immediate:true,  //immediate如果为true 代表如果在 wacth 里声明了之后，就会立即先去执行里面 
                     //的handler方法
    handler(val){    //通过immediate直接执行handler函数，传值传空，数组全部渲染到filGoods中
    this.filGoods = this.goods.filter((g)=>{
      return g.name.indexOf(val) !== -1   //等于-1代表字符串内没有搜索的元素。
})
}
}
},