<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="firstname">+ <input type="text" v-model="middlename">+ <input type="text" v-model="lastname">= <input type="text" v-model="fullname"> <p>{{fullname}}</p> <p>{{fullname}}</p> <p>{{fullname}}</p> <!-- 只輸出一次'ok' --> </div> <script> //創建Vue實例,得到 ViewModel var vm = new Vue({ el: '#app', data: { firstname: '', lastname: '', middlename:'' }, methods: {}, computed:{ //在computed中，可以定義一些屬性，這些屬性叫做計算屬性。計算屬性的本質就是一個方法，只不過我們在使用這些計算屬性的時候，是把他們的名字直接當作屬性來使用的；並不會把計算屬性當作方法去調用 //注意1：計算屬性在引用時候，一定不能加小括號()去調用，直接把他當作普通屬性去使用就好了 //注意2：只要計算屬性這個function內部，所用到的任何data中的數據發生了變化，就會立即重新計算這個計算屬性的值 //注意3：計算屬性的求值結果會被緩存起來，方便下次直接使用(提高運行效率)，如果計算屬性中所依賴的任何數據，都沒有發生過變化，則 不會被重新對計算屬性求值。 'fullname':function(){ console.log('ok'); return this.firstname + '-' + this.middlename + '-' + this.lastname; } } }); </script> </body> </html>