watch監聽 · vue

# watch ## 語法： ``` watch:{ 屬性名稱:function (){ //監聽屬性值的變化 } ``` ## 用途： ## 當需要在數據變化時執行異步或者開銷較大的操作是，這個方式是最有用的。 ~~~ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> 用戶名：<input type="text" v-model.lazy="name" /> <span :style="infoStyle">{{info}}</span> 密碼: <input type="text" /><br> </div> </body> </html> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue=new Vue({ el:'#app', data:{ name:'' , info: '', infoStyle:'' }, watch:{ //實時監聽 name:function (){ //監聽name屬性 //發送ajax請求到后臺數據庫 if(this.name==='admin'){ //模擬發送ajax請求 this.info='此用戶已注冊'; this.infoStyle={color:"red"}; }else { this.info='可以注冊'; this.infoStyle={color:"green"}; } } } }) </script> ~~~ ![](https://img.kancloud.cn/0b/c3/0bc3916e9d67aa38fc729f106325d62b_1220x840.png)