Vue 运用计算属性筛选数组简洁的实现方法

Vue 中用computedr计算属性，简洁的代码实现数据筛选

计算属性代码量由于监听属性watch

【设计逻辑】

filter()函数将数组进行筛选返回符合indexOf函数返回符合条件的新数组放到新建的newList（）中去。用 v-for 绑定数据到li 标签中。

代码内有详细关键每一步的完整注释。

【声明】个人的浅薄见解和心得总结，有不对之处还请大神点拨。谢谢！

<div id="app">
    <input type="text" v-model="inputValue" />
    <ul>
    	<li v-for="i in newList">{{i.name}}-{{i.price}}</li>
    </ul>
</div>

<script>
      new Vue({
        el: '#app',
        data: {
          inputValue: '',
          list: [
            { name: '羊绒大衣', price: 1080 },
            { name: '防雨风衣', price: 880 },
            { name: '羊绒长裤', price: 980 },
            { name: '防雨卫裤', price: 480 },
          ],
        },
        computed:{
        	newList(){   //新建一个空数组来接收筛选的值
        		return this.list.filter((i) =>{	 //filter函数是将数组进行筛选返回符合下列返回条件的新数组
        			return i.name.indexOf(this.inputValue) !== -1;  //indexOf函数取得name值中不等于-1的所有值返回作为参数。
        			
        		});
        	},		
        },
       
      });
</script>