查看“Vue从入门到实战:监听器的更多形式”的源代码
←
Vue从入门到实战:监听器的更多形式
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
监听器在定义时,除了直接写一个函数外,还可以接一个方法名。 <nowiki> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>监听器</title> </head> <body> <div id = "app"> 年龄: <input type = "text" v-model="age"> <p v-if="info">{{info}}</p> </div> <script src="vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { age: 0, info: '' }, methods: { checkAge(){ if(this.age >= 18) this.info = '已成年'; else this.info = '未成年'; } }, watch : { age: 'checkAge' } }); </script> </body> </html></nowiki> 监听器还可以监听一个对象的属性变化。 <nowiki> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>监听器</title> </head> <body> <div id = "app"> 年龄: <input type = "text" v-model="person.age"> <p v-if="info">{{info}}</p> </div> <script src="vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { person: { name: 'lisi', age: 0 }, info: '' }, watch : { // 该回调会在person对象的属性改变时被调用,无论该属性被嵌套多深 person: { handler: function(val, oldVal){ if(val.age >= 18) this.info = '已成年'; else this.info = '未成年'; }, deep: true,//无论该对象的属性层级有多深,只要值发生变化了,都会被监测到. immediate: true//让监听器函数在监听开始后立即执行 } } }); </script> </body> </html> </nowiki> 注: deep: true,//无论该对象的属性层级有多深,只要值发生变化了,都会被监测到. immediate: true//让监听器函数在监听开始后立即执行
返回至
Vue从入门到实战:监听器的更多形式
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息