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. 一文带你弄懂 CDN 技术的原理

    对于 CDN 这个东西,相信大家都有耳闻,感觉既陌生但又熟悉.最近深入了解了一下 CDN,这才发现原来 CDN 如此重要!今天就跟大家科普一下 CDN 是什么,以及为啥要有 CDN,最后再讲一下 CD ...

  2. C#静态类、静态成员、静态方法

    一.作用 静态类和非静态类重要的区别是在于静态类不能被实例化,也就是说不能使用  new 关键字创建静态类类型的变量,防止程序员写代码来实例化该静态类或者在类的内部声明任何实例字段或方法. 用于存放不 ...

  3. 基于LadybugFlow的微服务编排(1.SpringBoot集成)

    前言 前面的系列文章里,介绍了ladybugflow的业务可视化的设计以及常见场景的使用方法. 感谢大家对项目的关注. 本篇文章介绍一下基于ladybugflow的微服务编排场景及使用方法. 1. 业 ...

  4. MySQL内存管理机制浅析

    GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. GreatSQL是MySQL的国产分支版本,使用上与MySQL一致. 目录 一.placement new的定义 二.pl ...

  5. 关于 java 的动态绑定机制

    关于 java 的动态绑定机制 聊一聊动态绑定机制, 相信看完这篇文章,你会对动态绑定机制有所了解. 网上大多一言概括: 当调用对象的时候,该方法会和该对象的内存地址/运行类型绑定. 当调用对象的属性 ...

  6. Excel 工作簿、工作表与单元格

    工作簿 工作簿是指在 Excel 中用来存储并处理数据的文件,其扩展名是.xlsx.工作簿是由工作表组成的,每一个工作簿都可以包含一个或多个工作表,默认为 3 个工作表.Excel 2007 之前的版 ...

  7. .Net Core使用Coravel实现任务调度

    前言 前段时间需要在一个新项目里添加两个后台任务,去定时请求两个供应商的API来同步数据:由于项目本身只是一个很小的服务,不太希望引入太重的框架,同时也没持久化要求:于是我开始寻找在Quartz.Ne ...

  8. Little Girl and Problem on Trees

    题意 给定一棵无边权的树,最多只有一个点度数超过2,有两种操作 1)(0 u x d)将距离u节点d距离之内的节点的值加上x 2)(1 u)询问u节点的值 n<=100000,q<=100 ...

  9. 【Java】学习路径60-利用TCP协议接收多个客户端的数据

    import java.io.IOException; import java.net.*; public class TCP_Server { public static void main(Str ...

  10. Python条件语句的用法

    python条件语句使用 if 表达式,难度不高,需要注意的是嵌套用法,以及如何设置对应的条件. if 条件判断语句 python 语句是按固定顺序执行的,先执行前面的语句,再执行后面的语句.如果你像 ...