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. 最新MongoDB安装，学习笔记

    MongoDB 导读 作者还在陆续更新中,如果喜欢作者的笔记,觉得可以学习到有帮助,后面会不断学习新内容,就点个关注吧,如果觉得文章有关注可以点个赞,谢谢: 官网:https://www.mongod ...

  2. Linux下一键安装Python3&更改镜像源&虚拟环境管理技巧

    前言 之前分享过一篇<Linux系统自带Python2&yum的卸载及重装>,介绍了如何卸载及重装Linux(CentOS)自带的的Python2.7.今天主要介绍如何在Linux ...

  3. Python带我起飞——入门、进阶、商业实战_ 入门版电子书籍分享，

    Python带我起飞--入门.进阶.商业实战_ 免费下载地址 内容简介 · · · · · · <Python带我起飞--入门.进阶.商业实战>针对Python 3.5 以上版本,采用&q ...

  4. 个人学习记录-Cpp基础-成员初始化列表

    Translator     Translator     参考链接: https://blog.csdn.net/XIONGXING_xx/article/details/115553291http ...

  5. Three---面向对象与面向过程/属性和变量/关于self/一些魔法方法的使用/继承/super方法/多态

    python的面向对象 面向对象与面向过程 面向过程 面向过程思想:需要实现一个功能的时候,看重的是开发的步骤和过程,每一个步骤都需要自己亲力亲为,需要自己编写代码(自己来做) 面向对象 面向对象的三 ...

  6. luogu1419 寻找段落 （二分，单调队列）

    单调队列存坐标 #include <iostream> #include <cstdio> #include <cstring> #include <algo ...

  7. 数据库运维之路——关于tempdb暴增实战案例

    转眼间,2021年的第一个季度已经到了最后一个月了,由于疫情原因,最近一段时间一直在北京,基本上没有出差,每天上班下班的日子感觉时间过的好快,新的一年继续努力奋斗啊. 仔细回想一下,自己踏入到sql ...

  8. java-运算符与判断

    运算符: 1)算术运算符:+-*/%,++,-- 进行加.减.乘.除.取余数.自增.自减 2)关系运算符:>,<,>=,<=,==,!=    boolean类型 判断两个整形 ...

  9. Vue组件的继承用法

    Vue组件的继承用法 点击打开视频讲解 vue组件的继承适用于UI几乎一样,只是数据不一样的情况下,但是这种情况通过统一封装组件也是能实现的,小功能建议用封装,大功能建议用组件继承,因为大功能在结合搜 ...

  10. 275. H 指数 II--Leetcode_暴力

    来源:力扣(LeetCode) 链接:https://leetcode.cn/problems/h-index-ii 著作权归领扣网络所有.商业转载请联系官方授权,非商业转载请注明出处. 题目的大意是 ...