vue计算属性与监视属性

计算属性与监视属性

计算属性
在computed对象中定义计算属性的方法，在页面中使用{ {方法名}}
监视属性
经过 vm对象中的$watch方法或者 watch配置来监视指定的属性，
当属性发生变化时，回调函数自动调用，在函数内部进行计算

使用vue计算属性实现一个简单的查找：

效果前：

效果后：

html里面写：

<div id="app">
        <input type="text" placeholder="请输入商品" v-model="value" /><button>搜索</button>
        <div v-for="(sou,key) in sous" :key="key">{
  
  {sou.name}}</div>
    </div>

组件里面写：

<script src="node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
		 var vm = new Vue({
		            el: "#app",
		            data: {
		                value: "",
		                ai: [{ name: "Timi", age: 10 },
		                { name: "Tom", age: 18 },
		                { name: "Jack", age: 12 },
		                { name: "Maria", age: 21 },
		                ]
		            },
		            computed: {
		                sous() {
		                //使用filter过滤在返回给sous
		                    return this.ai.filter(val => val.name.indexOf(this.value) !== -1)
		                }
		            }
		        })
           </script>