<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title>Examples</title>
<meta name=”description” content=””>
<meta name=”keywords” content=””>
<link href=”” rel=”stylesheet”>
<script src=”https://cdn.bootcss.com/vue/2.4.2/vue.min.js”></script>
</head>
<body>
<div id=”app”>
<input type=”text” v-model=”items.text” ref=”count”/>
<div v-html=”number”></div>
</div>
<script>
new Vue({
el: ‘#app’,
data: {
number: ‘100’,
items: {
text:”,
},
},
watch:{//watch() 监听某个值（双向绑定）的变化，从而达到 change 事件监听的效果
items:{
handler:function(){
var _this = this;
var _sum = 100; // 字体限制为 100 个
_this.$refs.count.setAttribute(“maxlength”,_sum);
_this.number= _sum- _this.$refs.count.value.length;
},
deep:true
}
}
})
</script>
</body>
</html>
– handle 就是你 watch 中需要具体执行的方法
– deep：就是你需要监听的数据的深度，一般用来监听对象中某个属性的变化
– immediate：在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调