Vue 侦听器 watch
2024-08-24 06:14:08
1. 侦听器 watch
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性
当属性发生改变时，自动触发属性对应的侦听器。
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
2. 基础用法
当 msg 属性的值发生改变时，就会触发侦听器的执行
<div id="app">
<input type="text" v-model="msg">
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'Hello'
},
watch: {
msg: function(){
console.log(this.msg)
}
}
})
</script>
3. 应用场景：用户注册时，验证用户名是否存在
<div id="app">
用户名: <input type="text" name="name" v-model.lazy="username">
<span :style="msgStyle">{{ msg }}</span>
<br>
密码: <input type="password" name="pass">
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: '',
username: '',
msgStyle: ''
},
watch: {
username: function(){
// 发送ajax请求 验证用户名
if (this.username == 'liang') {
this.msg = '该用户名已存在'
this.msgStyle = {
color: 'red',
fontWeight: 'bold'
}
} else {
this.msg = '用户名可以注册'
this.msgStyle = {
color: 'green',
fontWeight: 'bold',
}
}
}
}
})
</script>
最新文章
- Windows Phone App的dump文件实例分析-Stack Overflow
- Bigfish的重新安装
- [转] Android利用tcpdump抓包
- 第一个完整的cppunit单元测试程序
- 基于EF创建数据库迁移
- [BZOJ 2350] [Poi2011] Party 【Special】
- jQuery的选择器中的通配符[id^='code'] 【转】
- sql中在查询语句中加判断，控制输出的内容
- java_ java多线程返回函数结果
- springboot自定义配置源
- 使用acs-engine在Azure中国区部署kubernetes集群详解
- thinkinginjava学习笔记05_访问权限
- DOS/Windows 文本格式与 Unix 文本各式转换
- [extjs5学习笔记]第三十七节 Extjs6预览版都有神马新东西
- 一个人工智能教程，教案接地气、限制级。 http://www.captainbed.net
- QT + OpenCV + MinGW 在windows下配置开发环境
- JSP是一种语言
- Session & Cookie小知识~
- Latex 左右引号
- 学习笔记-AngularJs（二）