I've been working on a H5 project recently. The requirement is that the login button can be clicked only after the user has entered the phone number and the verification code.
Before using Vue, we may be judged by the change event for input, whether the user has entered the content and then modified the button's state. Now with the Vue, it is easy to save a lot, we only need in the watch, listening to the value of the data model changes can be.
<div id= "App" class= "Login_area" >
<div class= "Form_line" >
<label> two times password:</label>
<input v-model= "passw2" placeholder= "Please enter password again"/>
</div>
</div>
data: {
PASSW2: ", //second input password
},
watch: {
passw2:function (curval,oldval) {
console.log (curval);
} ,
},
But what if the listener is an object.
A deep property is described in the Vue-watch document.
discover changes in object intrinsic values . So how do you actually do it.
<div id= "App" class= "Login_area" >
<div class= "Form_line" >
<label> User name:</label>
<input v-model= "info.name" placeholder= "Please enter user name"/>
</div>
<div class= "Form_line" >
<label> password:</label>
<input v-model= "INFO.PASSW" placeholder= "Please enter password"/>
</div>
</div>
var app = new Vue {
el: ' #app ',
data: {
info: {
name: ',//username
PASSW: ' Password
},
},
Watch: {
info: { //The change in the listening object value is different from the above.
Handler (curval,oldval) {
console.log (curval);
},
deep:true,}
,
},
})
About watch this is really useful in real-world projects, we should note that there are some differences in listening to properties and objects. This was also when I needed to listen to the object when I was crazy. I can't always write this:
Info.name:function (curval,oldval) {
console.log (curval);
},
Later, after reading the document, I knew there was a deep option.