<!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>