vue.js計算屬性(getter | setter)
阿新 • • 發佈：2019-01-09
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- Vue.js --> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> </head> <body> <div id="app"> 姓名: {{ fullName }} </div> </body> </html> <script> var app = new Vue({ el:'#app', data:{ firstName:'Jack', lastName:'Green' }, //所有的計算屬性都以函式的形式寫在vue例項內的computed選項內，最終返回計算的結果 //每一個計算屬性都包含一個getter和一個setter，我們的上個例項都是計算屬性的預設用法，只是利用了getter來獲取，在你需要時，也可以提供一個setter函式，當手動修改計算屬性的值就像修改一個普通資料那樣時，就會觸發setter函式，執行一些自定義操作 computed:{ fullName:{ //getter，用於讀取 get:function () { return this.firstName + ' ' + this.lastName; }, set:function (newValue) { var names = newValue.split(' '); this.firstName = names[0]; this.lastName = names[names.length - 1]; } //絕大多數情況下，我們只會用預設的getter方法來讀取一個計算屬性，在業務中很少用到setter，所以在宣告一個計算屬性時，可以直接使用預設的寫法，不必將getter和setter都宣告 } } }) </script>