Vue表单基本操作-收集表单数据

已于 2023-06-12 17:53:09 修改
阅读量1.5k 收藏 3
点赞数 1
分类专栏： Vue 文章标签： vue.js javascript 前端
于 2023-04-23 16:58:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46713508/article/details/130325374
版权

收集表单数据

使用vue中的v-model收集表单里面的数据，不同的表单元素配合v-model会有不同的写法和技巧
本次的表单元素包括：文本框，单选，多选，下拉框，文本域

编写表单元素

首先编写表单元素，包括：文本框，单选，多选，下拉框，文本域

input输入框细节

这里有一个细节(小技巧)：表单编写input输入框的时候，通常会配合label标签使用并加上相关的css或或者js，这样会让界面更加美观，用户体验更好，但是今天主要讲的是v-model获取不同的元素数据，就不在代码里面增加复杂的代码了，大家知道就好，我在下面简单演示下加不加的区别

不加上lable

在这里插入图片描述

页面的交互性很差，必须自己点击输入框才能获取到光标

在这里插入图片描述

加上lable

在这里插入图片描述

查看页面，点击账号会跳进对应的输入框并获取光标

在这里插入图片描述

继续编写表单元素

在这里插入图片描述

查看页面

在这里插入图片描述

表单元素到此就写完了，接下来就要把表单交给vue管理并收集数据了

text输入框和password输入框

这两个比较简单，定义两个变量绑定在输入框里面

在这里插入图片描述

在这里插入图片描述

radio单选按钮

接下来就是性别，也就是radio单选按钮，多个单选按钮，但是只能选中一个单选按钮

错误示例

如果直接简单粗暴的定义变量使用v-model绑定单选框，是不行的

在这里插入图片描述

页面上获取不到选中的值，为什么会这样的？因为v-model默认收集的是输入框的value,但是目前单选框是没有value的，所以获取不到

在这里插入图片描述

正确示例

给单选按钮赋值value属性即可，注意：value不要重复

在这里插入图片描述

在这里插入图片描述
如果想要某一个单元按钮默认选中，可以在属性赋默认值

在这里插入图片描述

男默认选中

在这里插入图片描述

checkbox多选框

错误示例

和单选框一样，不能直接定义属性使用v-model

在这里插入图片描述

可以看到收集到的是一个布尔值

在这里插入图片描述

这个错误和单元框一致，也是没value造成的，至于为什么是布尔值，vue获取的是这一组复选框里面的checked，所以只要选中了就是true，不然就是false

那么给复选框赋上value再试试

在这里插入图片描述

发现还是不行

在这里插入图片描述

哎，为什么给复选框配置了value属性还是不行呢？

因为复选框的初始值能够影响到收集到的数据，如果把复选框的属性错误的写成了字符串，那么就算配置了value值也不行

正确示例

注意：如果需要获取复选框的值，可以使用这种写法，如果只需要判断是否被选中，也就是true或false，可以参考下面的另外一种使用方式

多组复选框属性应该写成一个数组

在这里插入图片描述

这样就好了

在这里插入图片描述

select下拉框

select下拉框就比较正常了，和正常的输入框是一样的

在这里插入图片描述

在这里插入图片描述

如果想要上来就默认选中，也是和单选框一样的

在这里插入图片描述

在这里插入图片描述

textarea多行输入框

textarea多行输入框本质来说也是输入框，写法和正常文本框是一样的

在这里插入图片描述

在这里插入图片描述

小花皮猪
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue2 Element 表格&表单 我惯用的写法
白瑕 的博客
08-13 3931
我需要整理一下表单验证和表格, 我们的项目里大量的使用了它们, 我应该形成一个模式去套用而不是像现在这样边构思边写.提示：这里对文章进行总结：例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。.........
Vue基础（六）——表单
pro1822的博客
05-03 6013
Vue基础（六）——表单
Vue基础之表单Form(一)
qq_41720578的博客
04-13 9736
表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。Vue提供了v-model指令，用于在表单类元素上双向绑定数据，例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。例如下面例子: <div id="app"> <input type="text" v-model="message" placeholder="请输入...."> <p>{{message}}</p> </di
vue中用Element-ui封装表单(form)和表格(table)组件动态渲染数据展示
最新发布
2401_84152317的博客
05-14 480
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Vue 中的表格操作
it_xushixiong的博客
06-10 9228
在本文中，我们介绍了 Vue 中的表格操作的基本原理和用法。我们讲解了表格的基本用法，以及一些高级用法，如表格的排序、分页和筛选。我们给出了一些实例代码来帮助读者更好地理解。希望本文能对读者在实际开发中使用 Vue 操作表格有所帮助。
vue 动态表单添加，让你的网站更具交互性
热门推荐
Shids_的博客
03-25 1万+
vue 动态表单添加，让你的网站更具交互性
vue + Element Ui 中生成动态合并表格及后端数据说明及常见问题
weixin_53411280的博客
02-10 3369
vue + Element Ui 中生成动态合并表格及后端数据说明及常见问题
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
在Vue.js应用中，我们经常需要处理添加和编辑数据的功能，而这些操作通常会使用到同一个表单。在本场景中，使用了Element UI库的`el-form`组件来构建表单，它提供了丰富的表单元素和表单验证功能。在实现添加和编辑...
vue-jsonschema-form:vue2的JSON模式表单生成器
05-12
vue-jsonschema-form [WIP：未准备好] 基于JSON模式表单生成器 概述 该项目的目的是创建一个简单的Vue组件，该组件能够根据构建HTML表单，并且默认情况下使用语义。 入门 克隆此存储库，安装依赖项并使用dev命令...
vue自定义表单生成器form-create使用详解
10-16
`form-create` 支持 Vue 的各种组件，并且提供了丰富的功能，如动态渲染、数据收集、验证以及表单提交。以下是对 `form-create` 的详细解析： ### 主要特性 1. **动态渲染** - 只需提供 JSON 配置，即可自动生成...
vue自定v-model实现表单数据双向绑定问题
10-18
无论是基本的表单元素还是自定义组件，`v-model`都能帮助我们轻松地管理数据流。理解其工作原理对于深入学习和使用Vue.js非常重要，也是提升开发效率的关键。通过以上内容，希望能帮助读者更好地掌握`v-model`的使用...
Vue表单之v-model绑定下拉列表功能
10-17
主要介绍了Vue表单之v-model绑定下拉列表功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue表单进阶操作
见证自己学习,成长的记录
04-23 1025
这个复选框和上面爱好那个复选框是不一样的，它不需要收集value值，只需要知道是否被选择，也就是ture或false，这时候就可以安装输入框的方式去写，直接去定义字符串，而不是数组然后把全部数据填满看下这时候点击提交按钮，表单刷新了，一般都是通过ajax或者axios提供到后端，我们就打印在控制台上但是单击提交按钮会刷新表单和页面，要使用阻止默认行为，可以使用@sumbit事件去阻止表单提交@sumbit阻止默认提交行为这样点击按钮提交后就不会刷新提交表单了如果一个个属性挨个输出，这些写很麻烦一般使用aja
vue自定义表单设计器思路
acheng
03-14 3815
在Vue中，可以使用自定义组件实现表单设计器。自定义组件允许我们在Vue应用程序中创建可复用的组件。这些组件可以在多个Vue组件中使用，使我们能够将应用程序拆分成可维护的部分。为了实现表单设计器，我们将创建两个Vue组件：FormBuilder和FormRenderer。现在，我们已经了解了自定义表单设计器所需的两个Vue组件的功能。让我们开始实现它们。我们将使用Vue CLI创建一个新的Vue项目。在项目中，我们将创建两个Vue组件：FormBuilder和FormRenderer。
vue之表单处理（一）
weixin_52129860的博客
03-11 529
在日常的开发中，表单随处都被使用到，如：登录，问题反馈功能等。对表单的数据收集和绑定也是很常规的工作。在一般开发中处理表单，需要通过操作 DOM 来实现，是一个相对繁琐且低效率的工作。然而在 Vue 项目中你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。轻松地实现表单数据收集或绑定，提高了开发效率。它会根据控件类型自动选取正确的方法来更新元素。负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。接下来带领大家看看其基础用法。知识点v-model 指令基础用法。
Vue.js表单处理技术指南
Why_does_it_work的博客
07-18 2051
在Web开发中，表单是用户与应用程序进行交互的重要组成部分。Vue.js是一种流行的JavaScript框架，它提供了强大的工具和机制来处理表单数据。Vue.js表单处理使开发者能够轻松地收集、验证和提交用户输入的数据。Vue.js表单处理的核心概念是双向数据绑定。通过将表单元素与Vue实例中的数据属性进行绑定，任何对表单元素的更改都会自动更新Vue实例中的数据，反之亦然。这种双向绑定使得表单处理变得非常简洁和高效。在Vue.js中，表单是Web应用程序中常见的交互元素之一。
Vue｜获取表单数据
一步一个脚印，踏实努力，向着目标前进
06-17 7781
在Vue中获取表单数据有多种方式，具体取决于你使用的是哪种表单元素和你的需求。
vue表格静态
Timor7hao的专栏
07-16 4069
vue+element的静态表格，可直接复用更改为自己想要的样式。 1）界面如下： 2）代码如下： <template> <div class="scene-container"> <el-card class="card1"> <el-form :inline="true" :model="fo...
vue实现动态表单（表格动态增加减少，提交）
qq_53539628的博客
01-06 2428
动态数量表单
vue3+element-plus 表单校验
05-08
表单验证是前端开发中一项非常重要的工作。Vue3和Element-Plus提供了更加便捷和灵活的表单验证方式。下面是一个示例，使用Vue3和Element-Plus实现表单验证: 1. 安装Element-Plus ```shell npm i element-plus -S ``` 2. 在Vue3项目中引入Element-Plus并注册表单组件 ```javascript import { createApp } from 'vue'; import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; import App from './App.vue'; const app = createApp(App); app.use(ElementPlus); app.mount('#app'); ``` 3. 在Vue3组件中使用Element-Plus表单组件，并设置校验规则 ```html <template> <el-form :model="form" :rules="rules" ref="form" label-width="80px"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="form.password" show-password></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('form')">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { alert('提交成功'); } else { console.log('error submit!!'); return false; } }); } } }; </script> ``` 以上代码实现了一个带有两个输入框的表单，每个输入框都有校验规则，包括必填、长度限制等，点击提交按钮后，会触发表单验证，如果校验通过，则弹出提交成功的提示，否则不会提交表单。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小花皮猪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值