表单控件一般多用于页面交互或数据录入，可以说是很常用的东西了，Vue提供了v-model 指令，用于表单元素的双向绑定数据
需要注意的是，使用v-model后，表单控件只会关注绑定的数据，对于input的value值 或 textarea 中间的值都不会再生效
<body>
<div id="v1">
<input type="text" v-model="message">
<p>输入内容: {{ message }}</p>
</div>
<script src="vue.min.js"></script>
<script>
var app=new Vue({
el:"#v1",
data:{
message:""
}
})
</script>
</body>
单选按钮 :
<div id="v1">
<!--单选按钮在只有一个的情况下，可以使用v-bind (简写：) 来设置：-->
<div>
<label>
<input type="radio" :checked="only"> only为true时选中
</label>
</div>
<br><br>
<!--多个单选按钮需要v-model 和 value 配合使用,当value值与数据的相同部分则被选中-->
<div>
<label>
<input type="radio" v-model="sel" value="vvv"> vvv
</label>
<label>
<input type="radio" v-model="sel" value="uuu"> uuu
</label>
<label>
<input type="radio" v-model="sel" value="eee"> eee
</label>
</div>
</div>
<script src="vue.min.js"></script>
<script>
var app=new Vue({
el:"#v1",
data:{
only:true,
sel:"eee"
}
})
</script>
复选按钮 :
<div id="v1">
<!--复选框跟单选框的用法差不多，不过在复选框只有一个的情况下也是用v-model设置的-->
<label>
<input type="checkbox" v-model="only">
</label>
<br><br>
<label>
<input type="checkbox" v-model="more" value="1">
</label>
<label>
<input type="checkbox" v-model="more" value="2">
</label>
<label>
<input type="checkbox" v-model="more">
</label>
</div>
<script src="vue.min.js"></script>
<script>
var app=new Vue({
el:"#v1",
data:{
only:true,
sel:"eee",
more:[1,2,3]
}
})
</script>