vue如何根據(jù)條件判斷按鈕是否可以點(diǎn)擊
根據(jù)條件判斷按鈕是否可以點(diǎn)擊
按鈕當(dāng)在特定環(huán)境下不可點(diǎn)擊，需要根據(jù)判斷來(lái)控制點(diǎn)擊事件。
方法一：使用v-if 、v-else 來(lái)判斷
<template> ? ? <div> ? ? ? ? <el-button v-if="!isDisabled"></el-button> ? ? ? ? <el-button v-else @click="getDetail()"></el-button> ? ? </div> </template>
方法二：增加一個(gè)變量,判斷
<template> <el-button @click="!isDisabled && getDetail()"></el-button> </template>
<script>
data(){
? ? return{
? ? ? ? isDisabled:true, ?//為true時(shí)可以點(diǎn)擊，false時(shí)不可點(diǎn)擊
? ? }
}
</script>兩種方法都可以，但第二種相對(duì)來(lái)說(shuō)編寫(xiě)的代碼更少，具體怎么用看個(gè)人習(xí)慣。
vue判斷點(diǎn)擊當(dāng)前元素
點(diǎn)擊按鈕，出現(xiàn)彈窗；然后點(diǎn)擊遮罩層，當(dāng)前彈窗消失。
一開(kāi)始都會(huì)在遮罩層上綁定點(diǎn)擊事件，但是這樣的話，點(diǎn)擊了form表單，當(dāng)前彈窗也會(huì)消失。
需要判斷你是點(diǎn)擊了遮罩層還是form表單
1.在遮罩層上綁定點(diǎn)擊事件 @click=“showfun2($event)”
<div class="topfrom" v-show="msg" @click="showfun2($event)"> ?? ?<!--子組件--> ?? ?<fromdemo btndata="點(diǎn)擊咨詢"></fromdemo> ? </div>
2.判斷是否點(diǎn)擊了當(dāng)前元素 e.currentTarget === e.target
showfun2(e) {
?? ?if (e.currentTarget === e.target) {
?? ??? ?this.msg = false
?? ?}
},以上就完成當(dāng)前事件點(diǎn)擊元素的判斷。
接下來(lái)是分別對(duì)e.currentTarget、e.target打印
showfun2(e) {
?? ?console.log(e.currentTarget)
?? ?console.log(e.target)
},第一次點(diǎn)擊 遮罩層
第二次點(diǎn)擊 form表單
發(fā)現(xiàn) e.currentTarget 打印的始終是，綁定點(diǎn)擊事件的元素。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中el-date-picker選擇日期的限制的項(xiàng)目實(shí)踐
ElementUI的el-date-picker使用時(shí),有時(shí)候想要限制用戶選擇的時(shí)間范圍,本文就來(lái)介紹了vue中el-date-picker選擇日期的限制的項(xiàng)目實(shí)踐,感興趣的可以了解一下2023-10-10
Vue.js@2.6.10更新內(nèi)置錯(cuò)誤處機(jī)制Fundebug同步支持相應(yīng)錯(cuò)誤監(jiān)控
這篇文章主要介紹了Vue.js@2.6.10更新內(nèi)置錯(cuò)誤處機(jī)制，F(xiàn)undebug同步支持相應(yīng)錯(cuò)誤監(jiān)控 ,需要的朋友可以參考下2019-05-05
Vue監(jiān)聽(tīng)使用方法和過(guò)濾器實(shí)現(xiàn)
這篇文章主要介紹了Vue監(jiān)聽(tīng)使用方法和過(guò)濾器實(shí)現(xiàn)，過(guò)濾器為頁(yè)面中數(shù)據(jù)進(jìn)行強(qiáng)化，具有局部過(guò)濾器和全局過(guò)濾器2022-06-06
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)可編輯的表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
vue打包相關(guān)細(xì)節(jié)整理(小結(jié))
這篇文章主要介紹了vue打包相關(guān)細(xì)節(jié)整理(小結(jié)),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue踩坑記-在項(xiàng)目中安裝依賴模塊npm install報(bào)錯(cuò)
這篇文章主要介紹了vue踩坑記-在項(xiàng)目中安裝依賴模塊npm install報(bào)錯(cuò)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue3響應(yīng)式原理之Ref用法及說(shuō)明
這篇文章主要介紹了vue3響應(yīng)式原理之Ref用法及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue使用websocket連接優(yōu)化性能方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)菜單切換功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
淺談webpack SplitChunksPlugin實(shí)用指南
這篇文章主要介紹了淺談webpack SplitChunksPlugin實(shí)用指南，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09