計算屬性與監視屬性
計算屬性
在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>