vue computed監聽多個屬性
阿新 • • 發佈：2018-11-30
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <p>{{ myMsg }}</p> <button @click="clickHandler">修改</button> </div> <script src="vue.js"></script> <script> let vm = new Vue({ el: "#app", data() { return { msg: "alex", age: 18, } }, //在methods屬性 和 computed屬性 裡宣告的所有的方法裡面的this指的都是vue, 裡面不要用箭頭 *********** //箭頭函式 只用在定時器和ajax裡面 methods: {//裡面的每一個方法要掛載到 vm上 clickHandler() {//單體函式中的this就是當前物件vm console.log(this); this.msg = "wusir"; // 當msg的資料屬性 發生改變,下面的watch就會立馬監聽** this.age = 20; }, clickHandler2: function () {//這個裡面的this也是當前物件vm console.log(this) //在宣告的函式內部 this指的是當前物件vue }, //箭頭函式 只用在定時器和ajax裡面 clickHandler3: () => {//但是箭頭函式中的this是當前物件的父類window method裡面不要用箭頭 console.log(this)//在宣告的函式內部 this指的是當前物件vm的父類 window }, }, computed: { //對應的是一個物件 裡面放key-value 計算屬性預設只有getter方法 監聽的是msg和age myMsg: function () { //宣告一個方法 //寫業務邏輯 return `我的名字叫${this.msg},年齡是${this.age}`; } } }) </script> </body> </html>