常用表单元素
- 文本输入 input[type=*]
- 多行文本 textare
- 单选按钮 radio
- 复选框 CheckBox
- 选择框 select
文本
- 为文本绑定v-model指令
<input v-model="msg" placeholder="请输入..."/> - 在data中声明绑定的数据项
data:{msg:""}
单选按钮
- 单选按钮绑定到同一个
v-model='picked' - data返回选中的单选按钮的value值
data：{return{picked：""}}
复选框
- 在复选框元素上绑定同一个v-model
<input type="checkbox" id="syl1" value="syl1" v-model="checkedNames" /> - data中声明返回checkedNames值
data() { return { checkedNames: [], }; },
使用<label for="syl1">syl1</label>来声明该复选框的值
html代码
script代码
选择框
如何输入提示信息<option disabled value="">请选择</option>
值绑定
文本和多行文本值绑定
直接在标签上指定 value 是不能成功的，会被 Vue 忽略。
正确模式，通过 JavaScript 在组件的 data 选项中声明初始值
单选按钮
checkbox 和 radio 使用 checked 属性，所以直接给元素 value 值，当选中时 data 中声明的绑定项的值就为元素 value。
复选框
复选框可以是布尔值，toggle 为 true 或 false，当选中时，toggle 为 true，未选中时，toggle 为 false。
在日常开发中，复选框的值很多情况是特定的值，那么我们可以这样做，在标签中声明 true-value="yes" 和 false-value="no" 这两个属性，当选中时就是 true-value 属性指定的值，当未选中时就是 false-value 属性值。
通过 true-value="yes" false-value="no" 属性控制，选中时 toggle 值为 yes，未选中时为 no
如果你只想要选中有值，你可以这样做，true-value 属性指定值，false-value 属性设为空值。
选择框
选择框的值绑定，直接指定每个 option 的 value，可以是固定的，也可以是使用 v-bind:value 动态绑定的
修饰符
.lazy
开始介绍表单处理时，我们说了几点注意，不同的元素，使用的值不同，抛出的事件也不同。可能开发中，我们不需要数据实时更新，那么，我们怎么将 input 事件与 change 事件替换，可以使用 .lazy 修饰符，可以将抛出事件由 input 改为 change，使表单元素惰性更新，不实时更新。
.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值返回字符串（默认），需要自己进行类型转换。如果这个值无法被 parseFloat() 解析，则会返回原始的值。 给 v-model 添加 number 修饰符，用户即使输入的是非数值类型，也会进行转换，无法转换时，会返回原始的。
.trim
表单元素值首尾空格，自动过滤。
<input v-model.trim="msg" type="text" />
注意事项
注意一：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。直接给元素 value 赋值不会生效的，你应该通过 JavaScript 在组件的 data 选项中声明初始值。
注意二：v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件，具体体现我们在表单 修饰符小节，给大家说明：
-
text 和 textarea 元素使用
value属性和input事件（内部监听 input 事件）； -
checkbox 和 radio 使用
checked属性和change事件（内部监听 change 事件）； -
select 字段将
value作为 prop 并将change作为事件（内部监听 change 事件）。说明： change 和 input 区别就是，input 实时更新数据，change 不是实时更新
易错点注意data放回为data(){return{};},而不是data{return{};}。
