最近在做一个H5的项目。 需求是当用户在输入完了手机号和验证码之后,登录按钮才可以点击。
在没有使用vue
之前,我们可能是通过input
的change
事件来判断,用户是否输入了内容,然后修改按钮的状态。现在有了vue
,就省事了很多,我们只需要在watch中,监听数据模型的值改变即可。
<div id="app" class="login_area">
<div class="form_line">
<label>二次密码:</label>
<input v-model="passw2" placeholder="请再次输入密码" />
</div>
</div>
data: {
passw2: '', // 第二次 输入的密码
},
watch: {
passw2: function(curVal,oldVal){
console.log(curVal);
},
},
但是如果,监听的是一个对象呢?
vue-watch文档中介绍了一个deep属性。
发现对象内部值的变化。那么实际怎么做呢?
<div id="app" class="login_area">
<div class="form_line">
<label>用户名:</label>
<input v-model="info.name" placeholder="请输入用户名" />
</div>
<div class="form_line">
<label>密码:</label>
<input v-model="info.passw" placeholder="请输入密码" />
</div>
</div>
var app = new Vue({
el: '#app',
data: {
info: {
name: '', // 用户名
passw: '' // 密码
},
},
watch: {
info: { // 这监听对象值的改变 和上面的不一样。
handler(curVal,oldVal){
console.log(curVal);
},
deep: true,
},
},
})
关于watch这个在实际项目中确实很好用,我们要注意的是,在监听属性和对象的时候是有些差异的。这个也是当时在需要监听对象时候我是懵逼了。我总不能这么写:
info.name: function(curVal,oldVal){
console.log(curVal);
},
后来在看文档后才知道还有deep
选项。