Tracy 小笔记 Vue - 表单控件双向绑定

v-model 双向绑定

• 用来实现表单元素 input 和数据的双向绑定
• 原理
  v-module 其实是一个语法糖，它的背后本质上包含两个操作： v-on:input 和 v-bind:value

  <input v-model="message" placeholder="edit me">

  相当于

  <input :value="message" @input="dataChange" placeholder="edit me">
  data:{
    message:'a'
  },
  methods: {
    dataChange(event) { this.message = event.target.value; }
  }
  或者
  <input :value="message" @input="message = $event.target.value" placeholder="edit me">
              

• 同意协议：
   同意协议 下一步 data:{ isAgree: false },
• 值绑定其实就是在双向绑定的时候设置一个默认值。 比如说在默认选择的是“男”
• 修饰符
  • .lazy： v-model 在每次 input 事件触发后将输入框的值与数据进行同步，加了该修饰符之后就是在回车或者失去焦点时数据才会更新
  • .number 自动将用户的输入值转为数值类型， 因为默认情况下无论我们在输入框输入什么内容都会被当做字符串进行处理
  • .trim:过滤用户输入的首尾空白字符
    <input v-model.trim="msg">