单选框

<input type="radio" value="html" v-model="picked" id="html" />
<label for="html">HTML</label>
<input type="radio" value="css" v-model="picked" id="css" />
<label for="html">Css</label>
<input type="radio" value="js" v-model="picked" id="js" />
<label for="html">JavaScript</label>
<p>选择项是{{picked}}</p><!--输出的是css，修改了选中别的，输出的是value值，只有picked与value值相同，才会选中该项-->
<script type="text/javascript">
  var vm = new Vue({
    el: "#app",
    data: {
      picked: 'css'
    }
  })
</script>

复选框

<input type="checkbox" v-model="checked" value="html" id="html">
<label for="html">HTML</label>
<input type="checkbox" v-model="checked" value="js" id="js">
<label for="html">JavaScript</label>
<input type="checkbox" v-model="checked" value="css" id="css">
<label for="html">Css</label>
<p>{{checked}}</p>
<script type="text/javascript">
  var vm = new Vue({
    el: "#app",
    data: {
      checked: []
    }
  })
</script>

下拉列表

<select v-model="selected">
  <option>html</option>
  <option value="js">JavaScript</option><!--<opition>是备选项，如果含有value属性，v-model就会优先匹配value的值，如果没有，就会直接匹配<opition>的text-->
  <option>css</option>
</select>
<p>选择的是{{selected}}</p><!--v-model绑定了selected，值是js，默认选中了JavaScript，如果修改了，selected的值跟着改变-->
<script type="text/javascript">
  var vm = new Vue({
    el: "#app",
    data: {
      selected: "js"
    }
  })
</script>

绑定值

单选按钮

在业务中，有时需要绑定一个动态的数据，这时可以用v-bind来实现

<div id="app" v-cloak>
  <input type="radio" v-model="picked" :value="value">
  <label>单选按钮</label>
  <p>{{picked}}</p>
<!--一开始的picked值是false，当点击之后就会变成value值展示出来，这时的value值动态绑定给了一个实例中的value，值是123，所以picked改变之后，值会变成123
app.picked === app.value，值都是123-->
  <p>{{value}}</p>
</div>
<script type="text/javascript">
  var vm = new Vue({
    el: "#app",
    data: {
      picked: false,
      value: 123
    }
  })
</script>

复选框

<div id="app" v-cloak>
  <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
  <label>复选框</label>
  <p>{{toggle}}</p>
<!--页面刚渲染出来的时候，toggle的值是false，当勾选时，app.toggle === app.value1，再取消勾选，app.toggle === app.value2-->
  <p>{{value1}}</p>
  <p>{{value2}}</p>
</div>
<script type="text/javascript">
  var vm = new Vue({
    el: "#app",
    data: {
      toggle: false,
      value1: 'a',
      value2: 'b'
    }
  })
</script>

选择列表

<select v-model="selected">
  <option :value="{ number : 123 }">123</option>
</select>
{{ selected.number }}
<!--当选中的时候，app.selected是一个Object，所以app.selected.number === 123-->
<script type="text/javascript">
  var vm = new Vue({
    el: "#app",
    data: {
      selected: "",
    }
  })
</script>