Vue（收集表单数据）

最新推荐文章于 2023-10-17 20:32:25 发布

hunjinYang

最新推荐文章于 2023-10-17 20:32:25 发布

阅读量507

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_45855825/article/details/122417779

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue收集表单数据

若：<input type="text" />，则 v-model 收集的是value值，用户输入的就是 value 值。
若：<input type="radio" />，则 v-model 收集的是value值，且要给标签配置value值。
若：<input type="checkbox" />
1. 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2. 配置input的value属性：
1）. v-model的初始值是非数组，那么收集的就是checked（勾选or 未勾选，是布尔值）
2）. v-model的初始值是数组，那么收集的就是value组成的数组
备注：v-model的三个修饰符：
1. lazy：失去焦点再收集数据
2. number：输入字符串转为有效的数字（例如当需要表单收集的数据为int而不是字符串，即可使用，配合input中type="number"效果更佳）
3. trim：输入首尾空格过滤（多用于账号输入时可能会出现前面有空格，则使用该修饰符）

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js">  </script>
    <style>
        form{
            width: 330px;
            margin:10px auto;
            font-family:'Courier New', Courier, monospace;
            font-size: 20px;
        }
        input.info{
            margin:5px;
            padding:5px 10px;
            width: 200px;
            border-radius: 5px;
        }
        input{
            margin:5px;
        }
        a{
            color:blue;
        }
    </style>
</head>
<body>
    <div id="root">
        <form @submit.prevent="demo">
            <label for="account">账号：</label>
            <input type="text" v-model.trim="userInfo.account" id="account" name="account" class="info"><br>

            <label for="password">密码：</label>
            <input type="password" v-model="userInfo.password" id="password" name="password" class="info">
            <br>
            <label for="password">年龄：</label>
            <input type="number" v-model="userInfo.age" id="age" name="age" class="info">
            <br>
            性别：
            男<input type="radio" name="sex" value="男" v-model="userInfo.sex">
            女<input type="radio" name="sex" value="女" v-model="userInfo.sex"> <br>

            爱好：
            学习<input type="checkbox"  name="hobby" v-model="userInfo.hobby"  value="学习">
            唱歌<input type="checkbox" name="hobby" v-model="userInfo.hobby"  value="唱歌">
            打麻将<input type="checkbox" name="hobby" v-model="userInfo.hobby"  value="打麻将"><br>

            所属校区：
            <select name="school" id="" v-model="userInfo.school" >
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="xian">西安</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
            </select><br>

            
            其它信息：<textarea v-model.lazy="userInfo.info" name="" id="" cols="30" rows="10" ></textarea>
            <br>
            <input v-model="userInfo.accept" type="checkbox"> 阅读并接受<a href="http://www.baidu.com">《用户协议》</a>

            <br>
            <button type="submit">提交</button>
        </form>

    </div>
    
    <script type="text/javascript">
        Vue.config.productionTip = false;
        const vm = new Vue({
            el:'#root',
            data:{
                userInfo:{
                    account:'',
                    password:'',
                    sex:'',
                    hobby:[],
                    school:'',
                    info:'',
                    accept:'',
                    age:18,
                },
            },
            methods:{
                demo(){
                    // console.log(JSON.stringify(this._data));
                    console.log(JSON.stringify(this.userInfo));
                }
            }
        });
    </script>
 
</body>
</html>