你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。
但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
一组代码，看完text、textarea、radio、checkbox、select的基本用法：
<div id="app7">
<input type="text" v-model="message"><label>{{message}}</label></br>
<textarea v-model="message1"></textarea><label>{{message1}}</label></br>
<!--单选按钮在单独使用时,不需要v-model,直接使用v-bind 绑定一个布尔类型的值,为真时选中,为否时不选-->
<input type="radio" :checked="picked"><label>单选按钮</label></br>
<!--如果是组合使用来实现互斥选择的效果,就需要v-model 配合value来使用：-->
<input type="radio" v-model="sex" value="boy"><label>男</label>
<input type="radio" v-model="sex" value="girl"><label>女</label></br>
<!--复选框使用数组类型的数据匹配-->
<input type="checkbox" v-model="hobby" value="跑步"><label>跑步</label>
<input type="checkbox" v-model="hobby" value="爬山"><label>爬山</label>
<input type="checkbox" v-model="hobby" value="滑雪"><label>滑雪</label></br>
<!--单选时的选择框,多选时加multiple属性就可以了-->
<!--但我们一般都不用原生的这种下拉框，不美观，扩展功能也不好，一般会用插件或自己封装一个-->
<select v-model="select">
<option disabled value="">请选择</option>
<option>html</option>
<option value="js">javascript</option>
<option>css</option>
</select>
<!--用 v-for 渲染的动态选项-->
<select v-model="selected">
<option v-for="option in options" :value="option.value">
{{option.text}}
</option>
</select>
</div>