修饰符与v-model

.lazy修饰符

template>
  <div id="app">
    {{user}}
    <hr>
    登录
    <form @submit.prevent="onSubmit">
      <label><span>用户名:</span>
        <input type="text" v-model='user.username'>
      </label>
     <label><span>密码:</span>
        <input type="password" v-model='user.password'>
      </label>
      <button>登录</button>
  </form>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      user: {
        username:'',
        password:''
      },
      x: [],
    };
  },
  methods:{
    onSubmit(){
      console.log(this.user);
      
    }
  },
  components: {},
};
</script>

这串代码得到如下图所示

当我们输入用户名时，上面的username此时会同步更新，但是我们不想让它同步更新要怎么办呢？我们可以这样写<input type="text" v-model.lazy='user.username'>此时它监听的就是鼠标失去焦点事件的触发，当我们在输入用户名的时候，上面的username不会同步更新，但是当我们的鼠标点一下别的地方，上面就更新了，这就是.lazy的用法。

.number修饰符

还是同样的例子，当我们改成<input type="text" v-model.number='user.username'>,再对username进行初始化为数字的操作时，user只会同步更新合法的数字部分:

.trim修饰符

这个修饰符很好理解，就是两头的空格不要，中间的多个空格转化成一个空格：

v-model双向绑定

当我们写这句话的时候<input type="text" v-model='user.username'>,相当于在写这句话<input type="text" :value="user.username" @input="user.username = $event.target.value" />。这就是v-model的本质。