Vue.js表单数据收集与处理-CSDN博客

本文链接：https://blog.csdn.net/m0_55916923/article/details/126263760

本文介绍了如何在Vue.js中进行表单数据的收集，包括利用label标签获取焦点，使用v-model进行数据双向绑定，处理二选一的radio、多选的checkbox及下拉框select。特别强调了v-model在不同表单元素中的使用方式，以及如何处理数组类型的表单数据。此外，还提到了提交表单时的方法绑定，防止页面刷新，并提醒注意数字类型的数据处理，使用v-model的number修饰符确保数据为数值类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、点击文本同时能够产生焦点，利用label标签实现

        <form action="">
            <label for="demo1"> 账号：</label>
           <input type="text" id="demo1">
           <!-- 账号：<input type="text"> -->
            <label for="demo2"> 密码：</label>
           <input type="password" id="demo2">
        </form>

利用v-model数据双向绑定收集value值时，应写为：

     <form action="">
            <label for="demo1"> 账号：</label>
           <input type="text" id="demo1" v-model="account">
           <!-- 账号：<input type="text"> -->
       <label for="demo2"> 密码：</label>
           <input type="password" id="demo2" v-model="password">
        </form>

2、二选一用radio类型，并给予相同的名字属性

           性别：
           男<input type="radio" name="sex">
           女<input type="radio" name="sex">

利用v-model数据双向绑定收集value值时，应写为：

           性别：
           男<input type="radio" name="sex" v-model="sex" value="man">
           女<input type="radio" name="sex" v-model="sex" value="woman">

3、多选用checkbox，默认选中可使用checked

           爱好：
           学习<input type="checkbox" checked="checked">
           读书<input type="checkbox">
           打代码<input type="checkbox">

利用v-model数据双向绑定收集value值时，应写为：

           爱好：
           学习<input type="checkbox" v-model="hobby" value="study">
           读书<input type="checkbox" v-model="hobby" value="reading">
           睡觉<input type="checkbox" v-model="hobby" value="sleep">

注意：在vue的data中应将hobby配置为数组形式（hobby的初始值会影响v-model所收集的数据。对于多选项的表单类型，v-model所绑定的值应写为数组形式），并且必须配置value值（否则收集的是选项的checked属性，hobby的值只会显示true和false，分别对应勾选和未勾选，由于爱好均绑定为hobby，所以只要勾选一个选项，hobby值便变为true，由于v-model数据双向绑定原理，hobby为true，其他两个选项也会变为勾选状态）

 new Vue({
            el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data() {
                return {
                    account:'',
                    password:'',
                    sex:'',
                    hobby:[],
                    city:'',
                }
            },
        })

4、下拉框可使用select和option实现

            所属校区：
           <select>
            <option value="">请选择校区</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
           </select>

利用v-model数据双向绑定收集value值时，应写为：

           <select v-model="city">
            <option value="">请选择校区</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
           </select>

5、提交表单，将用户输入的信息进行传输，给form绑定demo方法,并配置demo方法。其中prevent方法是阻止页面刷新。

<form @submit.prevent="demo">
<form>

为了方便传输，可将data中数据包裹在userinfo对象中注意：原本绑定的数据均得加上userinfo

new Vue({
            el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data() {
                return {
                    userinfo:{
                    account:'',
                    password:'',
                    sex:'',
                    hobby:[],
                    city:'',
                }
                }
            },
            methods: {
                demo(){
                    console.log(JSON.stringify(this.userinfo));
                }
            },
        })

注意：原本绑定的data数据均得加上userinfo

 <div id="root">
        <form @submit.prevent="demo">
            <label for="demo1"> 账号：</label>
            <input type="text" id="demo1" v-model="userinfo.account"><br><br>
            <!-- 账号：<input type="text"> -->
        <label for="demo2"> 密码：</label>
            <input type="password" id="demo2" v-model="userinfo.password"><br><br>
           性别：
           男<input type="radio" name="sex" v-model="userinfo.sex" value="man">
           女<input type="radio" name="sex" v-model="userinfo.sex" value="woman"><br><br>
           爱好：
           学习<input type="checkbox" v-model="userinfo.hobby" value="study">
           读书<input type="checkbox" v-model="userinfo.hobby" value="reading">
           睡觉<input type="checkbox" v-model="userinfo.hobby" value="sleep"><br><br>
           所属校区
           <select v-model="userinfo.city">
            <option value="">请选择校区</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
           </select>
           <button>提交</button>
        </form>
    </div>

6、在表单收集数据时，有时候会涉及到数字的收集，系统会默认收集形式为字符串形式，当数据传输到数据库时可能会发生报错，因此要用到v-model修饰符 number

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