例如：
<div id="app">
<input type="radio" :checked="picked">
<label>单选按钮</label>
</div><script>
var app = new Vue({
el: "#app",
data: {
picked: true
}
});
</script>
如果是组合使用来实现互斥选择的效果，就需要v-model配合value来使用：
<div id="app">
<input type="radio" v-model="picked" value="html" id="html">
<label for="html">HTML</label> <input type="radio" v-model="picked" value="js" id="js">
<label for="js">JavaScript</label>
<input type="radio" v-model="picked" value="css" id="css">
<label for="css">CSS</label>
<p>您选择的是：{{picked}}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
picked: "js"
}
});
</script>
数据picked的值与表单按钮的value值一致时，就会选中该项，所以当前状态下选中的是第二项。
如图6-2所示：
复选框：
复选框也分单独使用和组合使用，不过用法稍与单选不同。
复选框单独使用时，也是用v-model来绑定一个布尔值。
例如：
<div id="app">
<input type="checkbox" v-model="checked" id="checked">
<label for="checked">选择状态：{{checked}}</label>
</div><script>
var app = new Vue({
el: "#app",
data: {
checked: false
}
});
</script>
在勾选时，数据checked的值改为了true，<label>中渲染的内容也会更新。
组合使用时，也是v-model与value一起，多个勾选框都绑定到同一个数组类型的数据，value的值在数据当中，就会选中这一项。
这一过程也是双向的，在勾选时，value的值也会自动push到这个数组中。
实例代码如下：
<div id="app">
<input type="checkbox" v-model="checked" value="html" id="html">
<label for="html">HTML</label>
<br>
<input type="checkbox" v-model="checked" value="js" id="js">
<label for="js">JavaScript</label>
<br>
<input type="checkbox" v-model="checked" value="css" id="css">
<label for="css">CSS</label>
<br>
<p>你选择的是：{{checked}}</p>
</div><script>
var app = new Vue({
el: "#app",
data: {
checked: ["html", "css"] }
