Vue——day08之收集表单数据

2024-09-04 15:12

本文主要是介绍Vue——day08之收集表单数据,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

代码讲解

HTML结构

表单部分

Vue.js部分

总结

整体代码

效果展示

总结


代码讲解

HTML结构

  1. DOCTYPE声明和基础设置:

    • 声明HTML文档的类型为HTML5,并设置字符编码为UTF-8,确保页面内容可以正确显示。<meta name="viewport" content="width=device-width, initial-scale=1.0"> 用于确保页面在移动设备上可以正确缩放和显示。
  2. 引入Vue.js库:

    • 使用<script>标签引入了外部的Vue.js文件,为页面提供Vue.js的支持,使得接下来的Vue代码能够工作。

表单部分

  1. Vue.js实例挂载点:

    • <div id="root">:这个div是Vue.js实例的挂载点,所有的Vue.js数据绑定和操作都在这个div内进行。
  2. 表单和数据绑定:

    • 表单元素使用v-model指令与Vue.js的数据模型进行双向绑定:
      • 账号密码字段使用.trim修饰符,确保输入的数据去除了首尾空格。
      • 年龄字段使用.number修饰符,将输入的数据强制转换为数字类型。
      • 性别单选按钮和爱好复选框与Vue数据模型绑定,选择的值会存储在对应的Vue模型属性中。
      • 所属城市下拉框与userInfo.city绑定,存储用户选择的城市。
      • 其他信息文本区域使用.lazy修饰符,确保数据在失去焦点时才更新模型。
      • 阅读并接受用户协议复选框绑定userInfo.agree,用于表示用户是否同意协议。
  3. 阻止表单的默认提交行为:

    • @submit.prevent="demo": Vue.js的事件处理器,阻止表单的默认提交行为,转而调用demo方法来处理提交。

Vue.js部分

  1. Vue实例的创建:

    • 通过new Vue()创建一个Vue实例,并绑定到页面上的#root元素,控制整个页面的交互和数据。
  2. 数据模型data:

    • data对象中包含了userInfo对象,用于存储用户的表单输入数据(如账号、密码、年龄、性别、爱好、城市、其他信息和用户协议的同意状态)。
  3. 方法methods:

    • 定义了一个demo方法,当表单提交时会触发该方法,该方法将当前userInfo对象转换为JSON字符串并打印到控制台中。

总结

  • 这段代码通过Vue.js实现了一个动态表单,用户在输入或选择表单内容时,数据会自动更新到Vue的数据模型userInfo中。当用户点击提交按钮时,表单的默认提交行为被阻止,取而代之的是调用Vue方法,将收集到的表单数据显示在控制台中。

整体代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>收集表单数据</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body><div id="root"><!-- prevent:阻止表单提交的默认行为 --><form @submit.prevent="demo"><!-- .trim:去除前后的空格 -->账号:<input type="text" v-model.trim="userInfo.account"><br><br>密码:<input type="password" v-model.trim="userInfo.password"><br><br><!-- .number:锁死类型为number类型了 -->年龄:<input type="number" v-model.number="userInfo.age"><br><br>性别:男<input type="radio" name="sex" value="男" v-model="userInfo.sex">女<input type="radio" name="sex" value="女" v-model="userInfo.sex"><br><br>爱好:学习<input type="checkbox" value="学习" v-model="userInfo.hobby">飞飞机<input type="checkbox" value="飞飞机" v-model="userInfo.hobby">看比赛<input type="checkbox" value="看比赛" v-model="userInfo.hobby"><br><br>所属城市<select v-model="userInfo.city"><option value="">请选择城市</option><option value="成都">成都</option><option value="哈尔滨">哈尔滨</option><option value="深圳">深圳</option><option value="新疆">新疆</option></select><br><br>其他信息:<!-- .lazy:懒加载,使这个模块失去焦点的瞬间才会被加载数据 --><textarea v-model.lazy="userInfo.otherInfo"></textarea><br><br><input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="https://wenjgo.blog.csdn.net">《用户协议》</a><br><br><button>提交</button></form></div></body><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:'#root',data:{userInfo:{account:'',password:'',age:'',sex:'男',hobby:[],city:'',otherInfo:'',agree:''}},methods: {demo(){// console.log(JSON.stringify(this._data))console.log(JSON.stringify(this.userInfo))}}});
</script>
</html>

效果展示

总结

收集表单数据:

若是文本框(&lt;input type="text"/>),则使用v-model收集的是value值,用户输入的就是value值。

若是单选框(&lt;input type="radio"/>),则使用v-model收集的是value值,需要给标签配置value值。

若是复选框(&lt;input type="checkbox" />):

  1. 若没有配置input的value属性,v-model收集的是checked值(勾选或未勾选,是布尔值)。
  2. 若配置了input的value属性: (1) 若v-model的初始值是非数组,v-model收集的是checked值(勾选或未勾选,是布尔值)。 (2) 若v-model的初始值是数组,v-model收集的是value组成的数组。

备注:v-model有三个修饰符:

  • lazy:失去焦点后再收集数据。
  • number:将输入的字符串转为有效的数字。
  • trim:过滤输入的字符串首尾空格。

这篇关于Vue——day08之收集表单数据的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1136314

相关文章

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

canal实现mysql数据同步的详细过程

《canal实现mysql数据同步的详细过程》:本文主要介绍canal实现mysql数据同步的详细过程,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的... 目录1、canal下载2、mysql同步用户创建和授权3、canal admin安装和启动4、canal

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

使用SpringBoot整合Sharding Sphere实现数据脱敏的示例

《使用SpringBoot整合ShardingSphere实现数据脱敏的示例》ApacheShardingSphere数据脱敏模块,通过SQL拦截与改写实现敏感信息加密存储,解决手动处理繁琐及系统改... 目录痛点一:痛点二:脱敏配置Quick Start——Spring 显示配置:1.引入依赖2.创建脱敏

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》:本文主要介绍了html滚动条滚动过快会留下边框线的解决方案,解决方法很简单,详细内容请阅读本文,希望能对你有所帮助... 滚动条滚动过快时,会留下边框线但其实大部分时候是这样的,没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行

详解如何使用Python构建从数据到文档的自动化工作流

《详解如何使用Python构建从数据到文档的自动化工作流》这篇文章将通过真实工作场景拆解,为大家展示如何用Python构建自动化工作流,让工具代替人力完成这些数字苦力活,感兴趣的小伙伴可以跟随小编一起... 目录一、Excel处理:从数据搬运工到智能分析师二、PDF处理:文档工厂的智能生产线三、邮件自动化:

Python数据分析与可视化的全面指南(从数据清洗到图表呈现)

《Python数据分析与可视化的全面指南(从数据清洗到图表呈现)》Python是数据分析与可视化领域中最受欢迎的编程语言之一,凭借其丰富的库和工具,Python能够帮助我们快速处理、分析数据并生成高质... 目录一、数据采集与初步探索二、数据清洗的七种武器1. 缺失值处理策略2. 异常值检测与修正3. 数据

pandas实现数据concat拼接的示例代码

《pandas实现数据concat拼接的示例代码》pandas.concat用于合并DataFrame或Series,本文主要介绍了pandas实现数据concat拼接的示例代码,具有一定的参考价值,... 目录语法示例:使用pandas.concat合并数据默认的concat:参数axis=0,join=

C#代码实现解析WTGPS和BD数据

《C#代码实现解析WTGPS和BD数据》在现代的导航与定位应用中,准确解析GPS和北斗(BD)等卫星定位数据至关重要,本文将使用C#语言实现解析WTGPS和BD数据,需要的可以了解下... 目录一、代码结构概览1. 核心解析方法2. 位置信息解析3. 经纬度转换方法4. 日期和时间戳解析5. 辅助方法二、L