1.3 Vue中的計算屬性和偵聽器
阿新 • • 發佈:2018-11-25
Vue中的計算屬性和偵聽器
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue中的計算屬性和偵聽器</title> <!--1 引入Vue庫--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--根據慕課網DellLee老師講解的vue2.5入門課程筆記,視訊地址: https://www.imooc.com/learn/980--> 姓:<input v-model:value="firstName" /> 名:<input v-model:value="lastName" /> <div> {{fullName}} </div> <div> {{count}} </div> </div> <script> var app = new Vue({ el: "#app", data: { firstName: '', lastName: '', count:0 }, computed: {//1 computed 是Vue中的計算屬性,如果內容沒有改變,則取上一次的計算結果,所以速度很快 fullName: function() { return this.firstName + ' ' + this.lastName; } }, watch: {//2 watch偵聽器 //監聽fullName變化,一旦該fullName變化,則執行方法中內容 fullName: function () { this.count++ } } }); </script> </body> </html>