实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>观察者/侦听器/监听器</title>
</head>
<body>
<!--在当前页面中创建一个挂载点-->
<div id="box">
用户名：<input type="text" v-model="username">
<h3>{{length}}</h3>
<!--v-show指令，true显示，false显示-->
<h3 v-show="isShow" :style="warning">{{messages}}</h3>
</div>
<script src="js/Vue.js"></script>
<script>
//控制台中查看Vue实例,看到则表示Vue引入并实例化成功
// console.log(new Vue());
//创建Vue的示例
new Vue({
//绑定一个挂载点
el: '#box',
data: {
username: '',
length: 0,
messages: '用户名太短了',
isShow: false,
warning: 'color:red'
},
//watch侦听器属性，监听是页面中的变量值的变化
watch: {
username: function () {
this.length++;
if (this.length < 6) {
this.isShow = true;
}else{
this.isShow = false;
}
}
}
})
;
//在当前页面中创建一个挂载点
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
创建挂载点
<!--在当前页面中创建一个挂载点--> <div id="box"></div>
绑定挂载点
new Vue({
//绑定一个挂载点
el: '#box'
})
;构造数据模型
data: {
username: '',
length: 0,
messages: '用户名太短了',
isShow: false,
warning: 'color:red'
},制作监听器
watch: {
username: function () {
this.length++;
if (this.length < 6) {
this.isShow = true;
}else{
this.isShow = false;
}
}
}vue指令大全——https://www.jianshu.com/p/c4a87e1b4ef7
监听器的进阶（转自他人）
watch方法
值是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值
值是函数名：不过这个函数名要用单引号来包裹
值是包括选项的对象：选项有三个
第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。
第二个是deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）
第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。
var vm = new Vue({
data: {
a: 1,
b: 2
},
watch: {
a: function (newVal, oldVal) {
console.log('new: %s, old: %s', newVal, oldVal)
},
// 方法名
b: 'someMethod',
// 选项的对象
c: {
handler: function (newVal, oldVal) { /* ... */ },
deep: true，
immediate: true
}
}
})
---------------------
作者：肖ZE
来源：CSDN
原文：https://blog.csdn.net/lucky541788/article/details/83143482
版权声明：本文为博主原创文章，转载请附上博文链接！
