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>