Vue v-model

Vue v-model

v-model可以在表单元素中实现数据双向绑定功能，根据不同的表单空间自动选取正确的property和emit事件。

1. text和textarea元素使用value和input事件
2. checkbox和radio使用checked和change事件
3. select使用value和change事件

// text
template: `
 <div>
    <input v-model="message"></input>
    <div>message:{{message}}</div>
  </div>
`,
data: {
  message: ''
},

// checkbox
template: `
  <div>
    <input type="checkbox" v-model="checked"></input>
    <div>选中情况：{{checked}}</div>
  </div>
`,
data: {
  checked: false
},

template: `
  <div>
    <input type="checkbox" id="1" value="1" v-model="checkedValues"></input>
    <input type="checkbox" id="2" value="2" v-model="checkedValues"></input>
    <input type="checkbox" id="3" value="3" v-model="checkedValues"></input>
    <div>多个复选框选中情况：{{checkedValues}}</div>
  </div>
`,
data: {
  checkedValues: []
},

// radio
template: `
  <div>
    <input type="radio" id="1" value="1" v-model="picked"></input>
    <input type="radio" id="2" value="2" v-model="picked"></input>
    <div>选中情况：{{ picked }}</div>
  </div>
`,
data: {
  picked: ''
},

// select
template: `
  <div>
    <select v-model="selected">
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <div>选中情况：{{ selected }}</div>
  </div>
`,
data: {
  selected: ''
},

可以通过渲染函数看到使用的是什么propety和事件，下面以input为例：

function render() {
  with(this) {
    return _c('div', [_c('input', {
      directives: [{
        name: "model",
        rawName: "v-model",
        value: (message),
        expression: "message"
      }],
      domProps: {
        "value": (message)
      },
      on: {
        "input": function ($event) {
          if ($event.target.composing) return;
          message = $event.target.value
        }
      }
    }), _c('div', [_v("message:" + _s(message))])])
  }
}

模板编译网址