The lazy modifier

Template >< div id="app"> {{user}} <hr> Login < form@submit. prevent="onSubmit"> <label><span> </span> <input type="password" v-model='user.password'> </label> </button> </form> </div> </template> <script> export default {name: "App", data() {return {user: { username:'', password:'' }, x: [], }; }, methods:{ onSubmit(){ console.log(this.user); } }, components: {}, }; </script>Copy the code

This string of code is shown below



When we enter the username, the above username will be updated synchronously, but what if we don’t want it to be updated synchronously? We could write it like this<input type="text" v-model.lazy='user.username'>This is when the mouse loses focus. When we type the username, the username doesn’t update synchronously, but when we point the mouse somewhere else, the username updates.lazyThe use of.

The number modifier

Again, the same example, when we change to<input type="text" v-model.number='user.username'>If username is initialized as a number, the user will update only the valid number:

The trim modifier

This modifier is easy to understand. It means that the Spaces at both ends are not converted to a single space:

V-model bidirectional binding

That’s the essence of the V-Model.