526互联

Vue2入门之超详细教程十五-收集表单数据

发布时间 2024-01-07 20:16:15作者: 李荣洋

Vue2入门之超详细教程十五-收集表单数据

1、简介

收集表单数据

  • 若：，则v-model收集的是value值，用户输入的就是value值。
  • 若：，则v-model收集的是value值，且要给标签配置value值。
  • 若：
    • 1.没有配置input的value属性，name收集的就是checked（勾选or未勾选，是布尔值）
    • 2.配置input的value属性：
      • （1）v-model的初始值是非数组，那么收集的就是checked
      • （2）v-model的初始值是数组，那么收集的就是value组成的数组
  • 备注：v-model的三个修饰符：
    • lazy：失去焦点在收集数据
    • number：输入字符串转为有效的数字
    • trim：输入首尾空格过滤

学习Vue之前最后会一些HTML和CSS的基础知识，HTML基础知识 传送门，CSS基础知识 传送门。

2、收集表单数据

1. 收集input框内容值

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

data(){
    return {
        account:'',
        password:'',
        sex:''
    }
}

定义input数据框，在数据中定义对应的变量，然后使用v-model双向绑定，即可收集input输入框的值

image-20240106205902455

2.收集radio单选框的值

<form action="">
    性别：
    <input type="radio" name="sex" v-model="sex">
    <input type="radio" name="sex" v-model="sex">
</form>

data(){
    return {
        sex:''
    }
}

image-20240106210410001

使用收集输入框的方式去收集单选框好像不好使了，这是因为，v-model默认收集的是属性中的value值，以上代码中并没有给radio设置value，所以获取不到内容
我们给radio绑定一个value即可

<form action="">
    性别：
    <input type="radio" name="sex" v-model="sex" value="male">
    <input type="radio" name="sex" v-model="sex" value="female">
</form>

image-20240106210842785

3.收集复选框的值

复选框也是收集的value的值，所以我们要用收集单选框的方式去操作

<form action="">
    爱好：
    学习<input type="checkbox" v-model="hobby" value="study">
    打游戏<input type="checkbox" v-model="hobby" value="game">
    吃饭<input type="checkbox" v-model="hobby" value="eat"><br><br>
</form>

data(){
    return {
        hobby:''
    }
}

image-20240106211617234

此时你会发现，当你勾选一个复选框时，所以的复选框都被都选了，这是因为复选框默认操作的checked即所有的复选框，此时所有的复选框都绑定了hobby且hobby的值为true，所以全部的复选框都被勾选了

data(){
    return {
        hobby:[]
    }
}

image-20240106211901485

只需要把hobby的类型改为数组即可解决改问题

4.收集选择框数据

所属校区
<select v-model="city">
    <option value="">请选择校区</option>
    <option value="beijing">北京</option>
    <option value="shanghia">上海</option>
    <option value="chenzhen">深圳</option>
    <option value="wuhan">武汉</option>
</select><br><br>

data(){
    return {
        city:''
    }
}

image-20240106213550320

需要注意的是，选择框是为select绑定数据，而不是每个option

5.收集文本框信息

<form action="">
    其他信息：
    <textarea v-model="other"></textarea><br><br>
</form>

data(){
    return {
        other:''
    }
}

image-20240106213805016

文本框和input框方法一致

6.收集是否同意值

<form action="">
    <input type="checkbox" v-model="agree">阅读并接受<a href="https://baidu.com">用户协议</a><br><br>
</form>

data(){
    return {
        agree:''
    }
}

image-20240106214355940

是否同意只有True和false两种状态，所以我们可以使用字符串变量收集

3、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/development/vue.js"></script>
</head>
<body>
    <div id="root">
        <form @submit.prevent="demo">
            账号：<input type="text" v-model="userInfo.account"><br><br>
            密码：<input type="password" v-model="userInfo.password"><br><br>
            性别：
            男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
            女<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br><br>

            爱好：
            学习<input type="checkbox" v-model="userInfo.hobby" value="study">
            打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
            吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"><br><br>
            所属校区
            <select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghia">上海</option>
                <option value="chenzhen">深圳</option>
                <option value="wuhan">武汉</option>
            </select><br><br>
            其他信息：
            <textarea v-model="userInfo.other"></textarea><br><br>
            <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="https://baidu.com">用户协议</a><br><br>
            <button>提交</button>
        </form>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el:'#root',
        data(){
            return {
                userInfo:{
                    account:'',
                    password:'',
                    hobby:[],
                    sex:'',
                    city:'',
                    other:'',
                    agree:''
                }
            }
        },
        methods:{
            demo(){
                console.log(JSON.stringify(this.userInfo))
            }
        }
    })
</script>
</html>

4、过程中遇到的错误及解决办法

​ 收集年龄的，只想收集数字类型的值，此时需要给v-model绑定一个属性

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

type="number"表示只能输入数字类型的内容，但此时后端变量收集到的是字符串类型的值，v-model.number属性可以把保存为数值类型的值

image-20240106215735997

<textarea v-model.lazy="userInfo.other"></textarea><br><br>

v-model.lazy表示不是实时收集数据，只有当失去焦点时才会收集数据

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

v-model.trim表示去除两边的空格，只会影响字符串两边，如果字符串中间带空格时不会影响的