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)文章
我在做項目的時候，有一個需求，在離開（跳轉(zhuǎn)或者關(guān)閉）購物車頁面或者刷新購物車頁面的時候向服務(wù)器提交一次購物車商品數(shù)量的變化。這篇文章主要介紹了vue監(jiān)聽頁面刷新和關(guān)閉功能,需要的朋友可以參考下2019-06-06
Vue項目中實現(xiàn)描點跳轉(zhuǎn)scrollIntoView的案例
這篇文章主要介紹了Vue項目中實現(xiàn)描點跳轉(zhuǎn)scrollIntoView的案例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
從零開始在vue-cli4配置自適應(yīng)vw布局的實現(xiàn)
這篇文章主要介紹了從零開始在vue-cli4配置自適應(yīng)vw布局，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
最近需要做一個el-table的表格,表頭需要顯示提示信息,本文主要介紹了ElementUI中el-table表格組件如何自定義表頭,具有一定的參考價值,感興趣的可以了解一下2023-09-09
今天小編就為大家分享一篇Vue-router 切換組件頁面時進入進出動畫方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vux+Axios攔截器增加loading的問題及實現(xiàn)方法
這篇文章主要介紹了Vux+Axios攔截器增加loading的問題及實現(xiàn)方法，文中通過實例代碼介紹了vue中使用axios的相關(guān)知識,需要的朋友可以參考下2018-11-11
vue單頁應(yīng)用的內(nèi)存泄露定位和修復(fù)問題小結(jié)
系統(tǒng)進程不再用到的內(nèi)存，沒有及時釋放，就叫做內(nèi)存泄漏（memory leak）。這篇文章主要介紹了vue單頁應(yīng)用的內(nèi)存泄露定位和修復(fù),需要的朋友可以參考下2019-08-08
vscode中prettier和eslint換行縮進沖突的問題
這篇文章主要介紹了vscode中prettier和eslint換行縮進沖突的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
前端文件導(dǎo)出設(shè)置responseType為blob時遇到的問題及解決
這篇文章主要給大家介紹了關(guān)于前端文件導(dǎo)出設(shè)置responseType為blob時遇到的問題及解決方法,文中通過圖文介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了el-tooltip根據(jù)條件控制顯示的示例代碼,包括列表型和樹狀圖型,本文通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12