vue如何根据条件判断按钮是否可以点击

更新时间：2022年04月08日 17:19:58 作者：D_jing20

这篇文章主要介绍了vue如何根据条件判断按钮是否可以点击，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

根据条件判断按钮是否可以点击

按钮当在特定环境下不可点击，需要根据判断来控制点击事件。

方法一：使用v-if 、v-else 来判断

<template>
    <div>
        <el-button v-if="!isDisabled"></el-button>
        <el-button v-else @click="getDetail()"></el-button>
    </div>
</template>

方法二：增加一个变量,判断

<template>
<el-button @click="!isDisabled && getDetail()"></el-button>
</template>

<script>
data(){
    return{
        isDisabled:true,  //为true时可以点击，false时不可点击
    }
}
</script>

两种方法都可以，但第二种相对来说编写的代码更少，具体怎么用看个人习惯。

vue判断点击当前元素

点击按钮，出现弹窗；然后点击遮罩层，当前弹窗消失。

在这里插入图片描述

一开始都会在遮罩层上绑定点击事件，但是这样的话，点击了form表单，当前弹窗也会消失。

需要判断你是点击了遮罩层还是form表单

1.在遮罩层上绑定点击事件 @click=“showfun2($event)”

<div class="topfrom" v-show="msg" @click="showfun2($event)">
    <!--子组件-->
    <fromdemo btndata="点击咨询"></fromdemo>  
</div>

2.判断是否点击了当前元素 e.currentTarget === e.target

showfun2(e) {
    if (e.currentTarget === e.target) {
        this.msg = false
    }
},

以上就完成当前事件点击元素的判断。

接下来是分别对e.currentTarget、e.target打印

showfun2(e) {
    console.log(e.currentTarget)
    console.log(e.target)
},

第一次点击遮罩层

在这里插入图片描述

第二次点击 form表单

在这里插入图片描述

发现 e.currentTarget 打印的始终是，绑定点击事件的元素。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue中el-date-picker选择日期的限制的项目实践
ElementUI的el-date-picker使用时,有时候想要限制用户选择的时间范围,本文就来介绍了vue中el-date-picker选择日期的限制的项目实践,感兴趣的可以了解一下
2023-10-10
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
这篇文章主要介绍了Vue.js@2.6.10更新内置错误处机制，Fundebug同步支持相应错误监控 ,需要的朋友可以参考下
2019-05-05
Vue监听使用方法和过滤器实现
这篇文章主要介绍了Vue监听使用方法和过滤器实现，过滤器为页面中数据进行强化，具有局部过滤器和全局过滤器
2022-06-06
Vue.js实现可编辑的表格
这篇文章主要为大家详细介绍了Vue.js实现可编辑的表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
vue打包相关细节整理(小结)
这篇文章主要介绍了vue打包相关细节整理(小结),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
vue踩坑记-在项目中安装依赖模块npm install报错
这篇文章主要介绍了vue踩坑记-在项目中安装依赖模块npm install报错，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
vue3响应式原理之Ref用法及说明
这篇文章主要介绍了vue3响应式原理之Ref用法及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
vue使用websocket连接优化性能方式
这篇文章主要介绍了vue使用websocket连接优化性能方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
Vue实现菜单切换功能
这篇文章主要为大家详细介绍了Vue实现菜单切换功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
浅谈webpack SplitChunksPlugin实用指南
这篇文章主要介绍了浅谈webpack SplitChunksPlugin实用指南，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09