vue+element实现当两个输入框有值按钮才可点击

最新推荐文章于 2023-08-08 17:21:14 发布

原创最新推荐文章于 2023-08-08 17:21:14 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了一种根据表单中特定字段是否为空来决定按钮是否禁用的方法。当两个指定的输入框（区域编号和抵押物地址）为空时，解析按钮将变为不可点击状态；反之，若有值输入，则按钮可正常点击。

1.当这两个值为空，disabled为true，反则为false:
（disabled="this.viewForm.areaNo === undefined || this.viewForm.collateralAddress === undefined "）

<el-col :span="2" style="margin-left: -60px">
                        <div align="center">
                            <el-button type="primary" :disabled="this.viewForm.areaNo === undefined || this.viewForm.collateralAddress === undefined ">
                                解析
                            </el-button>
                        </div>
                    </el-col>

2.在return定义 undefined: undefined

 return {
                undefined: undefined,
           }

页面实现：
当第一个和第三个输入框为空时，解析按钮置灰状态
在这里插入图片描述
当有值时，则可点击

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

除了菜还是菜

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue+element-plus+ts 实现点击输入计算公式

Missxu1895的博客

08-14

389

就是要出一个计算组件，可以帮助用户快速出计算公式，点击输入数字和运算符号得出一个(2+3)-4+5类似的格式，而我们需要得出两种一种就是既要知道输入的数字公式，另一种就是得出字母代替的公式比如：(A+B)-C+D。正则需要满足条件为：公式不能以运算符开始和结束；（）不能只出现一边，（）前后符号出现问题；两个输入数字之间必须要有运算符；

【Web前端问题】vue判断input没值的时候让button不能点击，有值的时候能够点击

与月亮私奔l的博客

06-23

1357

Web前端问题】vue判断input没值的时候让button不能点击，有值的时候能够点击

2 条评论您还未登录，请先登录后发表或查看评论

Vue中使用element-ui 给按钮绑定一个单击事件，实现点击按钮就弹出一个dialog对话框

热门推荐

m0_70807708的博客

08-17

3万+

实现给按钮绑定一个单击事件，实现点击按钮就弹出一个dialog对话框，在对话框中可输入数据进行提交，在点击取消时对话框关闭的功能

vue 禁用div、h3的点击事件

细节怪的博客

09-13

6265

使用属性时，我们会发现无论flag为true还是false，都无法禁止div、h3盒子的鼠标点击事件，因为它只对标签生效；、等盒子属性可以用css属性来控制。

VUE爬坑之---ios12系统微信中，填写完input后键盘收起页面底部有留白需点击页面才可使用提交按钮

weixin_45102071的博客

07-11

654

在 IOS 12 的系统中，在输入框中输入完内容，当点击键盘上的完成按钮时，会发现页面底部会有一大段区域变成了白色的，高度就是原来弹起的键盘的高度，这时候如果将页面上下滑动下，会发现这块空白区域又会消失，页面也恢复了正常一、新建 JS 文件，自定义指令，代码如下 import Vue from 'vue' /** * 自定义指令 v-reset-page，以解决 iOS 12 中键盘收起后页面...

javascript 表单完成后才能点按钮

德川家康

02-10

1006

javascript 表单完成后才能点按钮<html> <head> </head> <body>  <form action="sent.php" method="post" name="frm"> <input type="text" name="name_input" id="name"> <br> <button typ

vue+element实现表格新增、编辑、删除功能

10-16

为了实现这个功能，你可以添加一个`isEditing`标志到每个表格行的数据对象，当编辑时设置为`true`，然后在输入框失去焦点或确认按钮被点击时更新数据并重置`isEditing`。删除功能在单元格的操作列中已经定义，通过...

VUE.js+element-ui实现JSON编辑器

07-24

Vue.js和Element-UI是现代前端开发中常用的两个框架，Vue.js作为一个轻量级的JavaScript框架，以其易学易用、高效和灵活的特点受到了广大开发者喜爱。Element-UI则是一套基于Vue.js的企业级UI组件库，提供了丰富的...

在vue+element ui框架里实现lodash的debounce防抖

10-16

在Vue.js和Element UI的开发中，有时候我们需要优化用户输入事件的处理，特别是对于实时搜索或过滤数据的情况。这时，lodash的`debounce`函数就能派上用场，它可以帮助我们实现防抖(debounce)功能，避免频繁触发昂贵...

Vue+element+cookie记住密码功能的简单实现方法

10-14

总之，实现Vue+Element+Cookie的记住密码功能，需要理解Vue.js的响应式数据绑定、事件处理，以及如何使用Element UI构建表单，同时还需要掌握Cookie管理和加密算法。通过这些技术，我们可以为用户提供一个便捷且安全...

提交按钮默认不可点击，表单input输入正确后才可点击

this_ITBoy的博客

07-11

2万+

在做表单验证的时候，经常会遇到表单提交时按钮样式的问题，这里可以给出较为详细的方案。如图：输入前提交按钮置灰且不可点击，当账号和密码都输入正确后，按钮才会变成可点击的红颜色。之前我一直在想怎么获取input的变化也就是change事件，其实input是没有change事件的，倒是有一个propertychange事件，这个在上面的文章有提到过。这个propert

vue自定义指令监听input输入,当输入完成才能调取接口，防止频繁调用接口

coldriversnow的专栏

08-08

1443

具体来说，当用户输入新的内容时，clearTimeout(timeout) 会立即清除上一次触发的定时器，而 timeout = setTimeout(() => {binding.value()}, parseInt(binding.arg) || 300) 则会创建一个新的定时器，等待指定的时间后再执行 binding.value() 方法。需要注意的是，上面的代码中使用了一个 timer 变量来记录定时器的 ID，从而可以在用户输入新的内容时清除旧的定时器，避免出现多个定时器同时执行的情况。

vue+element解决 table点击操作按钮（如编辑/详情）在编辑/详情页面关闭/保存后返回table当前页

qq_38904099的博客

07-29

4305

思路：将当前页的页码nowPage存入localStroage/session，然后点击编辑/详情跳转到编辑/详情页面，然后，再次返回当前页的时候，在created生命周期里，获取到存储的nowPage，再进行加载这里要借助vue中独有的守卫钩子函数 beforeRouteEnter（在路由跳转前加载数据）还有beforeRouteEnter beforeRouteUpdate、befo...

Vue下button与element-ui el-button禁用属性

yuxuan89814的专栏

01-18

5084

html button元素 html button元素禁止是使用属性disable <button disable="disable">点击</button> Vue下使用变量来控制disable值是 <button :disable="dis">点击</button> Vue中： <script> export default{ data(){ return {

Input输入框输入前两个,自动生成第三个数据

老婆就是要败家

10-17

2675

一、需求说明我们现在有这样一个需求 , 一共三个输入框 , 第一个输入框是分子 , 第二个输入框是分母 , 最后一个输入框是百分比 , 另外百分比是一个小数, 我们只保留两位小数 , 那么如何实现呢 ? 二、实现思路 : 我这里使用的Vue 以及elementUI 组件, 所以输入框中的数据都在v-model中, 当我们输入前两个值的时候,我们就可以获取前两个值 , 然后我们对他们判断,如果这两个值不为空的话,我们就可以将这两个值相除得结果赋值给第三个就行另外需要保留两位小数,我们使用.toFixe

【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出

karshey的博客

11-10

6949

Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出

elementUI里的button使用disabled属性

苦瓜_小学生的博客

11-18

5516

学习记录：实现在table列表中控制二次点击按钮时对应行的button为不可点击，效果图如下： 1.el-table在表格按钮标签中定义disabled属性 HTML部分代码： <div id="app"> <el-table :data="showTableData" <el-table-column fixed="right" label="操作"

VUE点击按钮置灰判断

优快云tiexin的博客

07-28

1万+

VUE点击按钮置灰判断上代码根据页面值判断按钮是否可用，不可用置灰（不可点击true）在el-button或button标签里加上:disabled=“submissionFlag” 然后在return返回值里加上submissionFlag: true 默认为灰接下来在mounted方法里判断，首先要获取页面值然后判断是否置灰上代码第一步 <el-button :disabled=“submissionFlag” @click=“billingSubmission”>提交第

vue+element实现点击按钮新增一个盒子里面有两个input框

05-31

好的，我可以帮你解答。首先，在 Vue 中，你需要使用组件来实现 UI，Element UI 是一个非常流行的 UI 组件库，可以方便地实现你的需求。下面是一个示例代码： ```vue <template> <div> <el-button @click="addBox">新增盒子</el-button> <div v-for="(box, index) in boxes" :key="index"> <el-input v-model="box.name" placeholder="请输入名称"></el-input> <el-input v-model="box.value" placeholder="请输入值"></el-input> </div> </div> </template> <script> export default { data() { return { boxes: [] // 盒子数组 } }, methods: { addBox() { this.boxes.push({ name: '', value: '' }) } } } </script> ``` 这个示例代码中，我们使用了 Element UI 的 `el-button` 和 `el-input` 组件，通过 `v-for` 指令来循环渲染盒子数组中的每个盒子。在点击新增盒子按钮时，会向盒子数组中添加一个新的盒子对象，它有两个属性：`name` 和 `value`，分别表示盒子中的两个输入框的值。希望这个示例能对你有所帮助！