Vue 表单控件绑定

表单控件绑定
v-model 指令在表单控件元素上创建双向数据绑定， v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子
v-model 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。

• 基础用法
  
• 文本
• 多行文本
  <textarea v-model="message" placeholder="add multiple lines"></textarea>
• 复选框
  

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

• 
  单选按钮
  

  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>

• 选择列表
  

  <select v-model="selected">                          <select v-model="selected" multiple>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
   Selected: A

   

• 动态选项，用 v-for 渲染：

  <select v-model="selected">
    <option v-for="option in options" v-bind:value="option.value">
      {{ option.text }}
    </option>
  </select>
  <span>Selected: {{ selected }}</span>

  new Vue({
    el: '...',
    data: {
      selected: 'A',
      options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
      ]
    }
  })
  

   

• 绑定 value
  
  对于单选按钮，勾选框及选择列表选项， v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）：
  

  <!-- 当选中时，`picked` 为字符串 "a" -->
  <input type="radio" v-model="picked" value="a">
  <!-- `toggle` 为 true 或 false -->
  <input type="checkbox" v-model="toggle">
  <!-- 当选中时，`selected` 为字符串 "abc" -->
  <select v-model="selected">
    <option value="abc">ABC</option>
  </select>

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

• 复选框
  

   

• 单选按钮
  

   

• 选择列表设置
  

   

• 修饰符
  
• .lazy
  

  <!-- 在 "change" 而不是 "input" 事件中更新 -->
  <input v-model.lazy="msg" >

• .number
  自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值）
  

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

  这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。
• .trim
  自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入
  <input v-model.trim="msg">
  
• v-model 与组件
  HTML 内建的 input 类型有时不能满足你的需求。还好，Vue 的组件系统允许你创建一个具有自定义行为可复用的 input 类型，这些 input 类型甚至可以和 v-model 一起使用！