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. 技术分享 | innodb_buffer_pool_size为什么无法调低至1GB以内

    前言 innodb_buffer_pool_size可以调大,却不能调小至1GB以内,这是为什么? MySQL 版本:5.7.30 测试环境有台 MySQL 服务器反应很慢,检查系统后发现内存使用量已 ...

  2. Luogu1137 旅行计划 （拓扑排序）

    每次入队时DP : \(f[v] = \max \{f[u] + 1\}\) #include <iostream> #include <cstdio> #include &l ...

  3. 开源图编辑库 NebulaGraph VEditor 的设计思路分享

    本文首发于 NebulaGraph 公众号 NebulaGraph VEditor 是一个拥有高性能.高可定制的所见即所得图可视化编辑器前端库. NebulaGraph VEditor 底层基于 SV ...

  4. centos/windows服务器，Mysql数据库表结构损坏-已解决

    [问题原因]服务器突然断电 [故障报告]数据库表结构损坏 [解决思路]进入强制恢复模式,备份库表及数据重建 故障发现 周末公司断电,周一启动数据库就直接报错了 查看日志 上面标记的log,明确表示是非 ...

  5. 一文搞懂│mysql 中的备份恢复、分区分表、主从复制、读写分离

    目录 mysql 的备份和恢复 mysql 的分区分表 mysql 的主从复制读写分离 mysql 的备份和恢复 创建备份管理员 创建备份管理员,并授予管理员相应的权限 备份所需权限:select,r ...

  6. ArkUI 数据绑定、列表渲染、事件处理

    前言 有过开发微信小程序经验的小伙伴学习鸿蒙应用开发非常容易过渡过来. HML(HarmonyOS Markup Language)是一套类HTML的标记语言,通过组件,事件构建出页面的内容.页面具备 ...

  7. True 和 False 分别代表数字中的几？形象地记忆

    True 和 False 作为布尔值分别代表的意思是真和假. 灯泡亮起就是 1,灯泡熄灭就是 0.0 就是无状态,所以可以代表灯泡熄灭的状态,而 1 就是有状态的,所以可以代表灯泡亮起的状态. 那么, ...

  8. SUSE Linux Enterprise Server 12 使用二进制文件安装docker

    Docker-CE in SUSE 虽然使用zypper添加源也能安装,不过我在SLES 12sp5 上安装时发现好多命令还需要自己手动软连接,干脆网上找了找文档,再自己小改下,用二进制部署,也是可以 ...

  9. KingbaseES ALTER TABLE 中 USING 子句的用法

    using子句用于在修改表字段类型的时候,进行显示的转换类型. 1.建表 create table t(id integer); 2.插入数据 insert into t select generat ...

  10. KingbaseES 数据库连接断开问题排查思路

    用户在使用数据库过程中,经常会发现如果会话空闲一段时间,会话有可能断开,需要重连.这个问题影响因素很多,包括数据库参数设置.操作系统参数.防火墙等.以下介绍KingbaseES针对该问题的排查思路. ...