摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><script src="../vue.js"></script><title>侦听器/观察者/监听器</title></head><body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../vue.js"></script>
<title>侦听器/观察者/监听器</title>
</head>
<body>
<div id="box">
<!-- 感觉添加trim的方法去掉前后空格还是有问题，把中间的空格也去掉了 -->
用户名：<input type="text" v-model.trim="username">
<p>{{lenght}}</p>
<p v-show="isShow" :style="warning">{{message}}</p>
</div>
<script>
new Vue({
el: '#box',
data: {
username: '',
lenght: 0,
message: '用户名太短',
isShow: false,
warning: 'color:red'
},
watch: {
username: function(){
this.lenght++;
if (this.lenght < 6) {
this.isShow = true;
}else{
this.isShow = false;
}
}
}
})
</script>
</body>
</html>
