Vue——表单的收集

最新推荐文章于 2025-05-30 16:56:35 发布

Coding-弱鱼

最新推荐文章于 2025-05-30 16:56:35 发布

阅读量589

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： elasticsearch 学习大数据

本文链接：https://blog.youkuaiyun.com/weixin_47412580/article/details/125021615

前端专栏收录该内容

15 篇文章

订阅专栏

收集表单的数据应该注意的事项:

(1)若<input type="text"> ，则v-model收集的是text的value值，用户所输入的就是value的值。

(2)若<input type="radio">，则v-model收集的就是单选按钮的value值，且要给标签配置value值

(3)<input type="checkbox">,若没有配置input的value属性，则v-model收集的就是多选框的布尔类型值。

若配置了input的value值，v-model的初始值是非数组，那么收集到的值就是true/false。

若配置的input的值是数组元素的值，则获取到的value值就可以存储在其中。

<!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>
    <link rel="shortcut icon" href="phone.ico" type="image/x-icon" />
    <script type="text/javascript" src="vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>信息调查表</h2>
        <form @submit.prevent="demo">
            姓名： <input type="text" v-model="Userinfo.name">
            年龄： <input type="number" v-model.number="Userinfo.age"><br>
            性别：男<input type="radio" v-model="Userinfo.sex" value="man">
            女<input type="radio" v-model="Userinfo.sex" value="woman"><br>
            住址地区:
            <select name="" id="" v-model="Userinfo.address">
                <option value="Jiaozuo">焦作</option>
                <option value="Zhengzhou">郑州</option>
                <option value="Luoyang">洛阳</option>
            </select><br>
            兴趣爱好: 旅游<input type="checkbox" v-model="Userinfo.hobby" value="travel">
            吃饭<input type="checkbox" v-model="Userinfo.hobby" value="eat">
            篮球<input type="checkbox" v-model="Userinfo.hobby" value="baskateball"><br>
            <textarea name="" id="" cols="30" rows="10" v-model.lazy="Userinfo.text"></textarea><br>
            <button>提交</button>
        </form>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#root',
            data: {
                Userinfo: {
                    name: '',
                    sex: '',
                    age: '',
                    address: '',
                    hobby: [],
                    text: ''
                },
            },

            methods: {
                demo() {
                    console.log(JSON.stringify(this.Userinfo));
                }
            },
        })
    </script>
</body>

</html>