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的属性，v-model的初始值是数组

备注：v-model的修饰符：

　　lazy：失去焦点再收集数据

　　number：输入字符串转化为数字

　　trim：输入首尾空格过滤

　　

复制代码
<!DOCTYPE html>
<html lang="en">
<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>表单数据收集</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="container">
        <form>
            <!-- trim 去重  number 数字-->
            账号：<input type="text" v-model.trim="student.account"><br/><br/>
            密码：<input type="password" v-model="student.password"> <br> <br>
            年龄：<input type="number" v-model.number="student.age"> <br> <br>
            性别：
            男<input type="radio" name="sex" v-model="student.sex" value="male" >
            女<input type="radio" name="sex" v-model="student.sex" value="female">
            <br><br>
            爱好：
            喝酒<input type="checkbox" v-model="student.hobby" value="drink">
            吸烟<input type="checkbox" v-model="student.hobby" value="smoke">
            烫头<input type="checkbox" v-model="student.hobby" value="haircut">
            <br><br>
            所属校区
            <select v-model="student.schoolArea">
                <option value="">请选择所在校区</option>
                <option value="beijing">北京</option>
                <option value="shaihang">上海</option>
                <option value="guangzhou">广州</option>
                <option value="shenzhen">深圳</option>
            </select>
            <br><br>
            其它信息：
            <!-- lazy 焦点转移后 数据响应 -->
            <textarea v-model.lazy="student.richInfo"></textarea>
            <br><br>
            <input type="checkbox" v-model="student.checkStatus">阅读并接受<a href="https://www.czu.cn/">用户协议</a>
            <br><br>
            <button @click.prevent="showInfo">提交</button>
        </form>
    </div>

    <script type="text/javascript">
        new Vue({
            el:"#container",
            data:{
                student:{
                    account:'',
                    password:'',
                    age:'',
                    sex: '',
                    hobby: [],
                    schoolArea:'',
                    richInfo:'',
                    checkStatus:'',
                },
            },
            methods: {
                showInfo(){
                    console.log(JSON.stringify(this.student))
                }
            },
        })
    </script>
    
</body>
</html>
复制代码

 

posted @   市丸银  阅读(1)  评论(0)  编辑  收藏  举报
相关博文：
· Vue 对象 数组 添加/修改 数据 Vue.set
· Vue 列表渲染
· Vue学习笔记24--收集表单数据
· vue 收集表单数据
· Vue.js 收集表单数据
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示