Vue2.0筆記——計算屬性和偵聽器
阿新 • • 發佈:2018-04-18
Vue計算屬性
{{message}}
<p>Computed reversed message:{{ reversedMessage }}</p>
在模板使用表達式會非常便利,但是僅適用於簡單的運算。當放入太多的邏輯,使得模板過於難以維護。對於這樣,就像一個數據需要根據另一個數據的變動而變動。也因此計算屬性有了可以監視的能力。
<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">
<p>Computed reversed message:{{ reversedMessage }}</p>
該message屬性進行了雙向綁定,message值一更改,reversedMessage就會執行,並的到新的值,這就是它的監聽的能力。
<br/>
#### 計算屬性的setter方法
當然計算屬性默認只有getter方法,你還可以添加setter方法。
Vue2.0筆記——計算屬性和偵聽器