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)