初學Vue（四）-- 計算屬性，監視方法

計算屬性與監視方法

計算屬性 -- computed

計算屬性，顧名思義是能夠計算數據的屬性，爲何要特地出個計算屬性呢，由於vue若是直接將兩個數據加起來的話，使用加法計負數的算雙向綁定數據時就會出現問題

計算屬性用法 -- computed

代碼案例：加法計算器

• 首先計算器咱們想要用戶輸入因此創建兩個雙向綁定的變量數據
• 在computed屬性中讓函數的返回的結果賦予變量數據c
• 返回語句顯示轉換將兩個雙向綁定的數據轉爲Number型計算後將值返回

html部分：
<input type="text" v-model="a">+
<input type="text" v-model="b">=
{{c}}

js部分：
new Vue({
    el:'body',
    data:{
        a:"",
        b:"",
    },
    computed:{
        c:function(){
            return Number(this.a)+Number(this.b);
        }
    }
})

---

監視方法 -- $watch

代碼案例：加法計算器

• $watch 方法是當監聽的變量產生變化時會運行它的處理函數
• 這個方法是Vue 實例的方法，因此建立一個變量a 來儲存建立儲存了想要監聽的數據的Vue實例，在Vue實例後面接這個方法也是能夠的。

html部分：
<input type="text" v-model="a">+
<input type="text" v-model="b">=
{{c}}

js部分：
var a = new Vue({
    el:'body',
    data:{
        a:'',
        b:'',
        c:''
    }
})
a.$watch('a',function(){
    a.c=Number(a.a)+Number(a.b);
});
a.$watch('b',function(){
    a.c=Number(a.a)+Number(a.b);
})