vue計算屬性與監視屬性
阿新 • • 發佈:2020-12-17
技術標籤:vue.js
計算屬性與監視屬性
計算屬性
在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>