1. 程式人生 > >Vue2.0筆記——計算屬性和偵聽器

Vue2.0筆記——計算屬性和偵聽器

Vue

計算屬性

在模板使用表達式會非常便利,但是僅適用於簡單的運算。當放入太多的邏輯,使得模板過於難以維護。對於這樣,就像一個數據需要根據另一個數據的變動而變動。也因此計算屬性有了可以監視的能力。
<br/>
所以,對於任何復雜邏輯,你都應當使用計算屬性。

計算屬性也是用來存儲數據,但具有以下幾個特點:

  • 數據可以進行邏輯處理操作
  • 對計算屬性中的數據進行監視

    計算屬性邏輯處理

    計算屬性跟data選項一樣,也是用來存儲數據的。
    計算屬性寫在computed選項裏。
    可以看下面一個例子:

    
    var vm = new Vue({
        el:‘#app‘,
        data:{
            message:‘Hello‘
        },
        computed:{
            //計算屬性的getter方法
            reversedMessage:function(){
                return this.message.split(‘‘).reverse().join(‘‘);
            }
        }
    })

<div id="app">
<p>message:{{message}}</p>
<p>Computed reversed message:{{ reversedMessage }}</p>
</div>

通過執行代碼,message屬性值為Hello,翻轉了值為olleH。
reversedMessage屬性的值為一個函數,這個函數是一個getter方法,**如果該屬性所依賴的屬性(message)發生變更,此計算屬性會重新觸發**。
**修改代碼如下:**

<input type="text" v-model="message">

{{message}}
<p>Computed reversed message:{{ reversedMessage }}</p>


該message屬性進行了雙向綁定,message值一更改,reversedMessage就會執行,並的到新的值,這就是它的監聽的能力。
<br/>
#### 計算屬性的setter方法
當然計算屬性默認只有getter方法,你還可以添加setter方法。

Vue2.0筆記——計算屬性和偵聽器