Vue笔记-Day04-02（表单数据的收集）

最新推荐文章于 2024-07-22 15:13:59 发布

爱吃饭的阿强

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量491

点赞数

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

本文链接：https://blog.csdn.net/weixin_57155307/article/details/122126996

版权

vue\ 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

4.2 收集表单数据：

若：<input type="text">，则v-model收集的是value值，用户输入的就是value值；
若：<input type="radio">，则v-model收集的是value值，且要给标签配置value值；
若：<input type="checkbox">，
1.没有配置input的value属性，那么收集的是boolean的checked（是否勾选）
2.配置input的value属性：
（1）v-model的初始值不是数组：则收集依然是checked；
（2）v-model的初始值是数组：则收集的就是value组成的数组；
备注：v-model的三个修饰符：
lazy:失去焦点后再收集数据；
number:输入字符转为有效数字；
trim:输入首尾空格过滤；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>收集表单数据</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        li{
            line-height: 40px;
            list-style: none;
        }
    </style>
</head>
<body>
<div id="root">
    <form @submit.prevent="demo">
        <ul>
            <li> <label for="account">account:</label><input type="text" id="account" v-model.trim="userInfo.account"></li>
            <li><label for="password">password:</label><input type="password" id="password" v-model:value="userInfo.password"></li>
            <li><label for="age">age:</label><input type="number" id="age" v-model.number="userInfo.age"></li>
            <li>gender:
<!--             radio   -->
            man<input type="radio" name="gender" v-model="userInfo.gender" value="male">
            woman<input type="radio" name="gender" v-model="userInfo.gender" value="female">
            </li>
            <li>hobbies:
<!--            checkbox    -->
            eat<input type="checkbox" v-model="userInfo.hobby" value="eat">
            drink<input type="checkbox" v-model="userInfo.hobby" value="drink">
            play game<input type="checkbox" v-model="userInfo.hobby" value="play game">
            </li>
            <li>school
                <select v-model="userInfo.city">
<!--                    -->
                    <option value="">select you school</option>
                    <option value="New York">New York</option>
                    <option value="Bei Jing">Bei Jing</option>
                    <option value="Shang Hai">Shang Hai</option>
                    <option value="Paris">Paris</option>
                </select>
            </li>
            <li>
                other:
                <textarea v-model.lazy="userInfo.other"></textarea>
            </li>
            <li>
                阅读并同意用户协议和隐私政策<input type="checkbox" v-model="userInfo.agree">
            </li>
            <li>
                <button value="submit">submit</button>
            </li>
        </ul>


    </form>
</div>

    <script type="text/javascript">
        Vue.config.productionTip = false

        const vm = new Vue({
            el:'#root',
            data:{
                userInfo:{
                    account:'',
                    password:'',
                    age:'',
                    gender:'male',
                    hobby:[],
                    city:'',
                    other:'',
                    agree:false,
                }
            },
            methods:{
                demo(){
                    alert("submit");
                    console.log(JSON.stringify(this.userInfo))
                }
            }
        })

    </script>

</body>
</html>

爱吃饭的阿强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue笔记-Day04-02（表单数据的收集）

4.2 收集表单数据：若：，则v-model收集的是value值，用户输入的就是value值；若：，则v-model收集的是value值，且要给标签配置value值；若：，1.没有配置input的value属性，那么收集的是boolean的checked（是否勾选）2.配置input的value属性：（1）v-model的初始值不是数组：则收集依然是checked；（2）v-model的初始值是数组：则收集的就是value组成的数组；备注：v-model的三个修饰符：lazy:失去焦点后再
复制链接

扫一扫