Vue表单输入绑定

基础用法

v-model 指令在表单 <input>、<textarea>及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

• text

  <input v-model="message" type="text">
  <span>message is:{{message}}</span>
  

  data:{
      message : ""
  }
  

• checkbox

  <input type="checkbox" id="checkbox" v-model="checked">
  <span>{{checked}}</span>
  

  data:{
      checked : true
  }
  

  多个复选框

  <input type="checkbox" value="Jack" v-model="checkedNames">
  <span>Jack</span>
  <input type="checkbox" value="John" v-model="checkedNames">
  <span>John</span>
  <input type="checkbox" value="Mike" v-model="checkedNames">
  <span>Mike</span><br>
  <span>Checked names: {{ checkedNames }}</span>
  

  data:{
      checkedNames: []
  }
  

• radio

  <input type="radio" value="one" v-model="picked">
  <span>one</span>
  <input type="radio" value="two" v-model="picked">
  <span>two</span><br>
  <span>Picked: {{ picked }}</span>
  

  data:{
      picked: 'two'
  }
  

• select

  <select v-model="selected">
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
  

  data:{
      selected: ''
  }
  

值绑定

v-model绑定的值通常是静态字符串,但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

• 复选框

  <input type="checkbox" v-model="toggle" v-bind:true-value="yes" v-bind:false-value="no">
  <span>{{toggle}}</span><br>
  
  

  data : {
      toggle : "",
      yes : "选中",
      no : "没有选中"
  }
  

• 单选按钮

  <input type="radio" v-model="pick" v-bind:value="a">
  <span>{{pick}}</span>
  

  data : {
      pick : "",
      a : "选中"
  }
  

v-model修饰符

• .lazy
v-model 在每次 input 事件触发后将输入框的值与数据进行同步。lazy 修饰符，从而转变为使用 change 事件进行同步：

  <input v-model.lazy="msg" >
  <span>{{msg}}</span>
  

• .number
v-model 添加 number 修饰符,可以自动将用户的输入值转为数值类型

  <input v-model.number="price" type="number">
  

• .trim
trim 修饰符自动过滤用户输入的首尾空白字符

  <input v-model.trim="msg">