SOURCE

var vm = new Vue({
  el: '#app',
  data: function(){
    return {
      message: "",
      checkedNames: [],
      selected: [],
      options: [
        { text: 'One', value: 'One' },
        { text: 'Two', value: 'Two' },
        { text: 'Three', value: 'Three' }
      ],
      List:[],
      pick: ''
    }
  }
})

<div id="app">
  <div>
    <div>您输入的文字是：{{message}}<div>
    <input type="text" v-model.lazy.number="message" placeholder="请输入一段文字！"/>
  </div>
  <div>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <div>Checked names: {{ checkedNames }}</div>
  </div>
  <div id="example-5" class="demo">
    <select v-model="selected">
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>
  </div>
  <div>
    <select v-model="List">
      <option v-for="option in options" v-bind:value="option.value">
        {{ option.text }}
      </option>
    </select>
    <span>Selected: {{ List }}</span>
  </div>
  <div>
    <input type="radio" v-model="pick" name="sex" v-bind:value="'apple'">
    <input type="radio" v-model="pick" name="sex" v-bind:value="'orange'">
    <span>value: {{ pick }}</span>
  </div>
</div>

#app{
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  max-width: 750px;
  text-align: center;
}