Vue收集用户提交表单的数据

导读:本篇文章讲解 Vue收集用户提交表单的数据,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

🎀第一步:首先在html搭建一个form表单页面,要求展示以下信息:

账号、密码、年龄、性别、爱好、所在地区、其他信息

页面效果如下:

Vue收集用户提交表单的数据

HTML结构搭建如下:

    <div class="box">
        <form>
            账号:<input type="text"><br><br> 密码:
            <input type="password"><br><br> 年龄:
            <input type="number"><br><br> 性别:男
            <input type="radio" name="sex">女:<input type="radio" name="sex"><br><br> 爱好:
            <input type="checkbox">运动<input type="checkbox">学习<input type="checkbox">旅游<input type="checkbox">手工<br><br> 所在地区
            <select>
            <option>请选择地区</option>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>重庆</option>
            <option>海南</option>
            <option>新疆</option>
            <option>吉林</option>
        </select><br><br> 其他信息:
            <textarea></textarea><br><br>
            <input type="checkbox">阅读并接受<a href="javascript:; ">《用户协议》</a>
            <button>提交</button>
        </form>
    </div>

🎀第二步:创建vue实例,与容器绑定,data里面准备一个属性去接收收集到的数据:

<script>
        new Vue({
            el: '.box',
            data: {
                userInfo: {}
            }
        })
</script>

🎀第三步:通过v-model去进行数据的双向绑定:

注意:

  • v-model收集的是value值
  • 需要给<input type=”radio”/>单选框标签配置value值
  • <input type=”checkbox”/>(1)没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)。(2)配置input的value属性,v-model的初始值是非数组,那么收集的就是checked;v-model的初始值是数组,那么收集的的就是value组成的数组。

v-model的三个修饰符

  1. lazy:失去焦点再收集数据
  2. number:输入字符串转为有效的数字
  3. trim:输入首尾空格过滤

🎀第四步:通过JSON.stringify方法去把收集来的数据转换成字符串的格式去输出:

console.log(JSON.stringify(this.userInfo));

🎀完整代码:

    <div class="box">
        <form @submit.prevent="info"> 账号:
            <input type="text" v-model.trim="userInfo.account"><br><br> 密码:
            <input type="password" v-model="userInfo.password"><br><br>年龄:<input type="number" v-model.number="userInfo.age"><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="sports">运动<input type="checkbox" v-model="userInfo.hobby" value="study">学习
            <input type="checkbox" v-model="userInfo.hobby" value="travel">旅游
            <input type="checkbox" v-model="userInfo.hobby" value="manual">手工
            <br><br> 所在地区
            <select v-model="userInfo.city">
            <option value="">请选择地区</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="guangzhou">广州</option>
            <option value="chongqing">重庆</option>
            <option value="hainan">海南</option>
            <option value="xinjiang">新疆</option>
            <option value="jilin">吉林</option>
        </select><br><br>其他信息:
            <textarea v-model.lazy="userInfo.other"></textarea><br><br>
            <input type="checkbox" v-model="userInfo.agree">阅读并接受
            <a href="javascript:;">《用户协议》</a>
            <button>提交</button>
        </form>
    </div>
    <script>
        Vue.config.productionTip = false
        new Vue({
            el: '.box',
            data: {
                userInfo: {
                    account: '',
                    password: '',
                    age: 18,
                    sex: 'female',
                    hobby: [],
                    city: 'beijing',
                    other: '',
                    agree: ''
                }
            },
            methods: {
                info() {
                    console.log(JSON.stringify(this.userInfo));
                }
            },
        })
    </script>

用户输入和最终控制台接收到的数据效果展示如下:

Vue收集用户提交表单的数据

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/6247.html

(0)

相关推荐

半码博客——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!