vue中的表单

v-model指令实现表单双向绑定数据。触发文本框的input事件。
一、文本框

<div id="J_app">
  <p>{{ info }}</p>
  <input v-model.trim="info">
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    info: 'Hello Vue!'
  }
})

二、单选框

<div id="J_app">
  <input type="radio" id="male" value="male" v-model="ro">
  <label for="male">male</label>
  <br>
  <input type="radio" id="female" value="female" v-model="ro">
  <label for="female">female</label>
  <br>
  <span>性别：{{ ro }}</span>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    ro: ''
  }
})

三、复选框
1、一个勾选框

<div id="J_app">
  <input type="checkbox" id="J_ckb" v-model="ckb">
  <label for="checkbox">{{ ckb }}</label>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    ckb: ''
  }
})

2、多个勾选框

<div id="J_app">
  <input type="checkbox" id="html" value="html" v-model="ckbs">
  <label for="html">html</label>
  <input type="checkbox" id="css" value="css" v-model="ckbs">
  <label for="css">css</label>
  <input type="checkbox" id="js" value="js" v-model="ckbs">
  <label for="js">js</label>
  <br>
  <span>你学过哪些：{{ ckbs }}</span>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    ckbs: []
  }
})

3、多个动态勾选框
如果是动态复选框，怎么写？如果要实现全选，反选，怎么写？看这里。

四、选择列表
1、单选

<div id="J_app">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>vuejs</option>
    <option>reactjs</option>
    <option>angularjs</option>
  </select>
  <span>我选择: {{ selected }}</span>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    selected: ''
  }
})

2、多选

<div id="J_app">
  <select v-model="selected" multiple style=" 50px;">
    <option disabled value="">请选择</option>
    <option>vuejs</option>
    <option>reactjs</option>
    <option>angularjs</option>
  </select>
  <span>我选择: {{ selected }}</span>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    selected: []
  }
})

3、动态选

<div id="J_app">
  <select v-model="selected">
    <option v-for="option in options" v-bind:value="option.value">
      {{ option.text }}
    </option>
  </select>
  <span>我选择: {{ selected }}</span>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    selected: '0',
    options: [
      { text: 'vuejs', value: '0' },
      { text: 'reactjs', value: '1' },
      { text: 'angularjs', value: '2' }
    ]
  }
})