偵聽器watch 監聽單個屬性
阿新 • • 發佈：2018-11-30
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <p>{{ msg }}</p> <button @click="clickHandler">修改</button> </div> <script src="vue.js"></script> <script> new Vue({ el:"#app", data(){ return{ msg:"alex", age:18, } }, methods:{ clickHandler(){ this.msg="wusir" // 當msg的資料屬性 發生改變,下面的watch就會立馬監聽** } }, watch:{//watch是監聽單個屬性, 是單個單個的監聽,如果監聽多個屬性就要宣告多個屬性 //watch 監聽msg屬性 //function函式裡面要有返回值 "msg":function(value){ //監聽到資料之後,可以在這個地方做任何操作***** console.log(value); if (value === "wusir"){ alert(1); this.msg = "大wusir"}//修改後內容 }, "age":function(value){}//監聽age屬性 }// watch對應的物件,可以監聽多個屬性,比如監聽msg }) </script> </body> </html>