Vue学习之--------Vue中收集表单数据（使用v-model 实现双向数据绑定、代码实现）（2022/7/18）

Vue学习之--------Vue中收集表单数据（使用v-model 实现双向数据绑定、代码实现）（2022/7/18）

文章目录

​​1、Vue中实现表单数据的收集​​

​​1.1 基础知识​​​​1.2 代码实例​​​​1.3 测试效果​​​​1.4 额外插一嘴​​

1、Vue中实现表单数据的收集

1.1 基础知识

表单中常用的标签：input(输入框)、radio(单选框)、checkbox(多选框)、select(下拉列表)、textarea(文本域)、button(按钮)

收集表单数据：

若：​​​​，则v-model收集的是value值，用户输入的就是value值。若：​​​​，则v-model收集的是value值，且要给标签配置value值。若：​​​​​ 1、没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值） 2、配置input的value属性: (1)、v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）(2)、v-model的初始值是数组，那么收集的的就是value组成的数组

备注：v-model的三个修饰符：

lazy：失去焦点再收集数据number：输入字符串转为有效的数字trim：输入首尾空格过滤

1.2 代码实例