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我觉得不好用)等框架进行页面的快速设计

Vue学习之--------Vue中收集表单数据（使用v-model 实现双向数据绑定、代码实现）（2022/7/18）的更多相关文章

  1. vue 收集表单数据 （有错误的请各位大佬指点）

     收集表单数据:        若: <input type="text"/>, 则v-model收集 的是value值,用户输入的就是value值.        若 ...

  2. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  3. vue学习之vue基本功能初探

    vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...

  4. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  5. 2016/05/13 Thinkphp 3.2.2 ①数据添加 ②收集表单数据入库操作 ③数据修改操作

    ①数据查询 add() 该方法返回被添加的新记录的主键id值 两种方式实现数据添加 数组方式数据添加 $goods = D(“Goods”); $arr = array(‘goods_name’=&g ...

  6. Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)

    Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)

  7. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  8. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  9. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

随机推荐

  1. 我和Apache DolphinScheduler的缘分

    关于 DolphinScheduler社区 Apache DolphinScheduler(incubator) 于17年在易观数科立项,19年3月开源, 19 年8月进入Apache 孵化器,社区发 ...

  2. 监督学习集成模型——AdaBoost

    一.集成学习与Boosting 集成学习是指将多个弱学习器组合成一个强学习器,这个强学习器能取所有弱学习器之所长,达到相对的最佳性能的一种学习范式. 集成学习主要包括Boosting和Bagging两 ...

  3. SpringBoot整合Redis实现常用功能

    SpringBoot整合Redis实现常用功能 建议大小伙们,在写业务的时候,提前画好流程图,思路会清晰很多. 文末有解决缓存穿透和击穿的通用工具类. 1 登陆功能 我想,登陆功能是每个项目必备的功能 ...

  4. ASP.NET CORE在docker中的健康检查（healthcheck）

    在使用docker-compose的过程中,很多程序都提供了健康检查(healthcheck)的方法,通过健康检查,应用程序能够在确保其依赖的程序都已经启动的前提下启动,减少各种错误的发生,同时,合理 ...

  5. 没写完。【java】IDEA-调教界面、设置语言、插件的使用

    步骤: 1.官方网站:https://www.jetbrains.com/idea/ (zip)版本:https://download.jetbrains.com.cn/idea/ideaIC-202 ...

  6. pod资源的健康检查-liveness探针的httpGet使用

    使用liveness探针httpget方式检测pod健康,httpGet方式使用的最多 [root@k8s-master1 tanzhen]# cat nginx_pod_httpGet.yaml a ...

  7. 第八十三篇：Vue购物车(四) 总价计算

    好家伙, 1.总价计算 来了,又先是一波分析: 我们用一个计算属性amt 我们把item中被勾选的项用一个过滤器过滤器来 然后用一个循环相加,把商品的价格乘以商品的数量, 把这个总值返回出去, 然后组 ...

  8. 阿里druid-spring-boot-starter 配置，个人整理以及遇到的问题（防止之后找不到）

    ​ 简介,什么是Druid Druid是阿里巴巴开源平台上的一个项目,整个项目由数据库连接池.插件框架和SQL解析器组成.该项目主要是为了扩展JDBC的一些限制,可以让程序员实现一些特殊的需求,比如向 ...

  9. GB/T 28181联网系统通信协议结构和技术实现

    技术回顾 在本文开头,我们先一起回顾下GB/T28181联网系统通信协议结构: 联网系统在进行视音频传输及控制时应建立两个传输通道:会话通道和媒体流通道. 会话通道用于在设备之间建立会话并传输系统控制 ...

  10. KingbaseES R6 集群repmgr.conf参数'recovery'测试案例(一)

    KingbaseES R6集群repmgr.conf参数'recovery'测试案例(一) 案例说明: 在KingbaseES R6集群中,主库节点出现宕机(如重启或关机),会产生主备切换,但是当主库 ...