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