目录
1.input
1）type = text（文本框）
2）type = checkbox 复选框
3）type = radio 单选框
2.textarea
3.select
4.v-model的修饰符
1）.lazy
2）.number
3）.trim
小桃回来啦，忙一些别的事情，可有一段时间没有学习前端了，还是接着之前的内容写vue的指令，v-model是语法糖，可以在表单元素上创建双向数据绑定，当数据更新时对应元素更新，元素更新时对应数据更新。
1.input
1）type = text（文本框）
<div id="app"><input v-model="message"><p>Message为：{{ message }}</p></div>
const vm = new Vue({el: '#app',data: {message: 'JWH'}})
【结果】可以看到表单元素更新时，数据message也同时更新了
2）type = checkbox 复选框
单个复选框，绑定布尔值，v-model="Boolean"
<div id="app"><input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label></div>
const vm = new Vue({el: '#app',data: {checked: true}})
【结果】
多个复选框，这种情况是将 v-mode l与一数组绑定，数组中的值为被选中的input框的value值
<div id="app"><input type="checkbox" name="" id="zhang" value="张爱玲" v-model="checkedNames"><label for="zhang">张爱玲</label><input type="checkbox" name="" id="yang" value="杨绛 v-model="checkedNames"><label for="zhang">杨绛</label><input type="checkbox" name="" id="qian" value="钱钟书" v-model="checkedNames"><label for="zhang">钱钟书</label><br><span>被选中的人放在checkedNames中，有：{{ checkedNames }}</span></div>
const vm = new Vue({el: '#app',data: {checkedNames: []}})
【结果】
3）type = radio 单选框
被绑定的数据和value同步
<div id="app"><input type="radio" name="" id="zhang" value="张爱玲" v-model="picked"><label for="zhang">张爱玲</label><input type="radio" name="" id="yang" value="杨绛" v-model="picked"><label for="zhang">杨绛</label><input type="radio" name="" id="qian" value="钱钟书" v-model="picked"><label for="zhang">钱钟书</label><br><span>被选中的人放在checkNames中，有：{{ picked }}</span></div>
const vm = new Vue({el: '#app',data: {picked: ''}})
【结果】
2.textarea
<div id="app"><p>多行文本为：{{ message }}</p><textarea v-model="message" cols="85" rows="5"></textarea></div>
const vm = new Vue({el: '#app',data: {message: ''}})
【结果】
3.select
单选，匹配的值为option中的汉字
<div id="app"><select v-model="selected"><option>张爱玲</option><option>杨绛</option><option>钱钟书</option></select><span>选择：{{ selected==='请选择'?'':selected }}</span></div>
const vm = new Vue({el: '#app',data: {selected: '请选择'}})
【结果】
【注】如果v-model表达式的初始值未能匹配任何选项，<select>元素将被渲染为“未选中”状态。在ios中，这会使用户无法选择第一个选项。因为这种情况下，ios不会触发change事件，因此可以提供一个值为空的禁用选项
多选：绑定一个数组
<div id="app"><select v-model="selected" multiple><option>A</option><option>B</option><option>C</option></select><span>选择：{{ selected }}</span></div>
const vm = new Vue({el: '#app',data: {selected: []}})
【结果】
4.v-model的修饰符
1）.lazy
在默认情况下，v-model在每次input事件触发后，将输入框的值与数据进行同步。如果要变为使用change事件同步可以添加lazy修饰符
2）.number
自动将用户的输入值转换为数值类型
3）.trim
自动过滤用户输入的首尾空白字符
