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. 并发编程原理学习-reentrantlock源码分析

    ReentrantLock基本概念 ​ ReentrantLock是一个可重入锁,顾名思义,就是支持重进入的锁,它表示该锁能够支持一个线程对资源的重复加锁,并且在获取锁时支持选择公平模式或者非公平模式 ...

  2. element获取用户选中的table (两步即可)

    第一步 给 table 设置一个 ref 属性 1 <el-table 2 :data="DepData" 3 stripe 4 ref="depTable&quo ...

  3. 内存问题难定位,那是因为你没用ASAN

    摘要:ASAN全称:Address Sanitizer,google发明的一种内存地址错误检查器.目前已经被集成到各大编译器中. 本文分享自华为云社区<内存定位利器-ASAN使用小结>,作 ...

  4. 深入理解Aarch64内存管理

    本文是对learn_the_architecture_-_aarch64_memory_management的部分翻译和个人注解.个人英文水平有限,若有翻译不当,欢迎加我私人微信LinuxDriver ...

  5. Luogu3802 小魔女帕琪 (排列组合)

    注意除数为0情况 #include <iostream> #include <cstdio> #include <cstring> #include <alg ...

  6. 大数据Hadoop入门教程 | (二)Linux

    使用finalShell可以提供文件目录图形化 完整Linux命令整理参考大佬博客:Linux常见文件管理命令 - Mr_Walker - 博客园 Linux文件系统基础知识 Linux文件系统概念 ...

  7. rcu的学习记录

    crash> p rcu_sched_state.node[0] $13 = { lock = { raw_lock = { slock = 748760225 } }, gpnum = 211 ...

  8. kubernetes之镜像拉取策略ImagePullSecrets;

    1.容器镜像是什么? 1.容器镜像(Container Image)是最终运行的软件: 2.容器镜像(最初为Docker镜像,现在叫OCI镜像更合适)是将软件打包的形式.但是容器镜像还可以携带额外的设 ...

  9. redis-hash命令

    一.HDEL key field [field ...] 从 key 指定的哈希集中移除指定的域.在哈希集中不存在的域将被忽略. 如果 key 指定的哈希集不存在,它将被认为是一个空的哈希集,该命令将 ...

  10. MyBatis快速上手与知识点总结

    目录 1.MyBatis概述 1.1 MyBatis概述 1.2 JDBC缺点 1.3 MyBatis优化 2.MyBatis快速入门 3.Mapper代理开发 3.1 Mapper代理开发概述 3. ...