Vue学习之--------Vue中收集表单数据(使用v-model 实现双向数据绑定、代码实现)(2022/7/18)

简介: 这篇文章介绍了Vue中使用v-model实现表单数据收集的方法,包括基础知识、代码实例和测试效果,并提供了一些额外建议。

文章目录

  • 1、Vue中实现表单数据的收集
    • 1.1 基础知识
    • 1.2 代码实例
    • 1.3 测试效果
    • 1.4 额外插一嘴

1、Vue中实现表单数据的收集

1.1 基础知识

表单中常用的标签:input(输入框)、radio(单选框)、checkbox(多选框)、select(下拉列表)、textarea(文本域)、button(按钮)

收集表单数据:

  • 若:<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的三个修饰符:

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

1.2 代码实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="App">
        <form @submit.prevent="submit">
            账号:<input type="text" v-model.trim="UserInfo.account" /><br /><br />
            姓名:<input type="text" v-model="UserInfo.name"><br /><br />
            密码:<input type="password" v-mode="UserInfo.password"><br /><br />
            年龄: <input type="number" v-mode="UserInfo.age"><br /><br />
            性别:
            男<input type="radio" name='sex' v-model="UserInfo.sex" value="man">
            女 <input type="radio" name="sex" v-model="UserInfo.sex" value="female">

            爱好:
            学习:<input type="checkbox" v-model="UserInfo.hobby" value="study">
            打游戏:<input type="checkbox" v-model="UserInfo.hobby" value="playgame">
            干饭:<input type="checkbox" v-model="UserInfo.hobby" value="eat"> <br /><br />

            所在城市:
            <select v-model="UserInfo.city">
                <option value="">请选择城市</option>
                <option value="shanghai">上海</option>
                <option value="beijing">北京</option>
                <option value="zhengzhou">郑州</option>
            </select>
            <br /><br />
            备注:
            <textarea v-model="UserInfo.other"></textarea><br /><br />
            <input type="checkbox" v-model="UserInfo.agree">阅读并接收<a href="http://www.baidu.com"></a>
            <button>提交</button>

        </form>

    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示

        //创建Vue实例
        new Vue({
            el: '#App',
            data: {
                value: "Vue",
                UserInfo: {
                    account: '',
                    name: '',
                    password: '',
                    age: 18,
                    sex: 'man',
                    hobby: [],
                    city: 'shanghai',
                    other: '',
                    agree: ''
                }
            },
            methods: {
                submit() {
                    console.log(JSON.stringify(this.UserInfo))

                }
            },
        })
    </script>

</body>

</html>

1.3 测试效果

在这里插入图片描述

1.4 额外插一嘴

  • 样式的设计可以引入外部css(方便管理)
  • 输入框的验证规则可以单独写一个js文件(方便管理)
  • 可以使用elementui、Bootstrap、layui(layui我觉得不好用)等框架进行页面的快速设计
    在这里插入图片描述
相关文章
|
2天前
|
JavaScript 前端开发 测试技术
组件化开发:创建可重用的Vue组件
【10月更文挑战第21天】组件化开发:创建可重用的Vue组件
7 1
|
1天前
|
缓存 JavaScript 数据管理
优化 Vue 应用中的性能
【10月更文挑战第22天】优化 Vue 应用性能需要综合考虑多个方面,从数据管理、组件化、虚拟 DOM 操作、网络请求、代码结构等多方面入手,不断进行优化和改进,以提供更流畅的用户体验。同时,要根据具体的应用场景和需求,选择合适的优化策略,确保性能优化的效果和可行性。
|
2天前
|
JavaScript 前端开发 C#
从入门到放弃,我们为何从 Blazor 回到 Vue
【10月更文挑战第29天】在前端开发中,许多开发者从尝试新技术 Blazor 最终回到熟悉的 Vue。主要原因包括:1) Blazor 学习曲线陡峭,Vue 上手容易;2) Vue 开发工具成熟,开发效率高;3) Vue 性能优异,优化简单;4) Vue 社区庞大,生态丰富;5) 项目需求和团队协作更适配 Vue。选择技术栈需综合考虑多方面因素。
|
6月前
|
JavaScript 前端开发 开发者
vue 的双向数据绑定的原理
vue 的双向数据绑定的原理
64 0
|
12月前
|
存储 设计模式 JavaScript
简单小示例彻底搞明白vue双向数据绑定核心原理
vue 很大的一个优势就是双向数据绑定,而在 react 或小程序中是需要我们自己手动 setState、setData 去修改视图数据
77 0
|
JavaScript 前端开发
vue相关面试题2:1.封装vue组件作用;2双向数据绑定原理;3.Router 是什么;4.导航钩子有哪些
它们有以下参数。 ●to::即将要进入的目标路由对象。 ●from:当前导航正要离开的路由。 ●next: 一定要用这个函数才能到达下一个路由,如果不用就会遭到拦截。
279 0
|
5天前
|
JavaScript
在 Vue 中处理组件选项与 Mixin 选项冲突的详细解决方案
【10月更文挑战第18天】通过以上的分析和探讨,相信你对在 Vue 中使用 Mixin 时遇到组件选项与 Mixin 选项冲突的解决方法有了更深入的理解。在实际开发中,要根据具体情况灵活选择合适的解决方案,以确保代码的质量和可维护性。
35 7
|
5天前
|
存储 JavaScript
vue——store全局存储
【10月更文挑战第18天】Vuex 是 Vue.js 应用中非常重要的一个工具,它为我们提供了一种有效的状态管理方式。通过合理地使用 Vuex,我们可以更好地组织和管理应用的状态,提高应用的开发效率和质量。
20 1
|
2天前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表