vue—computed計算屬性
阿新 • • 發佈：2018-12-14
要點：
1.computed定義的屬性，稱為計算屬性。本質是定義的方法，但是我們在使用時，直接當作屬性使用，不用加()
2.每次計算屬性使用的資料發生改變時，計算屬性呼叫其處理方法
3.將計算屬性的最新的值，放在快取中。只有在計算屬性的變數改變時，才會重新將快取內容重新整理。所以，別的方法呼叫計算函式結果時，如果沒有觸發變數的改變，不會呼叫對應的function
HTML程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../lib/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="firstname"> + <input type="text" v-model="lastname"> = <input type="text" v-model="fullname"> </div> <script> var vm = new Vue({ el:'#app', data:{ firstname:'', lastname:'' }, computed:{ 'fullname':function () { return this.firstname + '·' + this.lastname; } //1.computed定義的屬性，稱為計算屬性。本質是定義的方法，但是我們在使用時，直接當作屬性使用，不用加() //2.每次計算屬性使用的資料發生改變時，計算屬性呼叫其處理方法 //3.將計算屬性的最新的值，放在快取中。只有在計算屬性的變數改變時，才會重新將快取內容重新整理。所以，別的方法呼叫計算函式結果時， //如果沒有觸發變數的改變，不會呼叫對應的function } }) </script> </body> </html>
效果：
