Vue学习：Vue技术——收集表单数据_vue3 读取表单的内容

可以通过v-model指令双向绑定数据，在收集表单数据过程中，几个需要注意的点：

1、若<input type="text">，则v-model收集的是value值，用户输入的就是value值；

2、若<input type="radio">，则v-model收集的是value值，且要给标签配置value值；

3、若<input type="checkbox">，分为两种情况：

a：没有配置input的value属性，那么收集的就是checked，是一个布尔值；

b：配置了input的value属性：

（1）：v-model的初始值是非数组，那么收集的就是checked，是布尔值；

（2）：v-model的初始值是数组，那么收集到的就是value组成的数组；

例子如下：

<form @submit.prevent="demo">

           账号：<input type="text" v-model="account"><br><br>

           密码：<input type="password" v-model="password"><br><br>

           性别：

           男<input type="radio" name="sex" value="male" v-model="sex">

           女<input type="radio" name="sex" value="female" v-model="sex"><br><br>

           年龄：<input type="number" v-model.number="age"><br><br>

           爱好：

           <input type="checkbox" value="学习" v-model="hobby">学习

           <input type="checkbox" value="唱歌" v-model="hobby">唱歌

           <input type="checkbox" value="跳舞" v-model="hobby">跳舞<br><br>

           所属校区：

           <select v-model="city">

               <option value="">请选择校区</option>

               <option value="beijing">北京</option>

               <option value="shanghai">上海</option>

               <option value="zhengzhou">郑州</option>

           </select><br><br>

           其他信息：

           <textarea v-model="other"></textarea><br><br>

           <input type="checkbox" v-model="agree">阅读并接受<a href="#">用户协议</a><br><br>

           <button>提交</button>

</form>

const vm=new Vue({

            el:"#root",

            data:{

                account:'',

                password:'',

                sex:'male',

                age:'',

                hobby:[],

                city:'beijing',

                other:'',

                agree:''

            },

            methods: {

                demo(){

                    console.log(JSON.stringify(vm._data));

                }

            },

        })

值绑定：

对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)，但是有时我们可能想把值绑定到 Vue 实例的一个动态 属性 上，这时可以用 v-bind 实现，并且这个 属性 的值可以不是字符串。

修饰符：

.lazy：失去焦点再收集数据；

.number：自动将用户的输入值转为数值类型；

.trim：自动过滤用户输入的首尾空白字符；