vue中的事件加判斷條件如何進(jìn)行選擇性點(diǎn)擊
更新時(shí)間：2024年03月07日 08:50:05 作者：document_write
這篇文章主要介紹了vue中的事件加判斷條件如何進(jìn)行選擇性點(diǎn)擊方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue中事件加判斷條件進(jìn)行選擇性點(diǎn)擊
@click="(items.length>1)?choose(items):''"
vue點(diǎn)擊事件 根據(jù)條件判斷是否可以點(diǎn)擊
需求
根據(jù)特定條件，增加或者去掉click事件
（例如：clickFlag == true時(shí)，添加click事件；clickFlag == false時(shí)，去掉click事件；）
解決方法
方式一：在綁定事件中直接添加標(biāo)示量clickFlag
<div @click="clickFlag && addGoodsHandler()">
為真
</div>
<div v-else>
為假
</div>方式二：用v-if 、v-else-if、v-else 判斷
<div v-if="clickFlag" @click="addGoodsHandler()">
為真
</div>
<div v-else>
為假
</div>很明顯，第一種感覺(jué)更高級(jí)，用更少的代碼完成功能，Write less，Do more
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+element-ui集成隨機(jī)驗(yàn)證碼+用戶(hù)名+密碼的form表單驗(yàn)證功能
在登入頁(yè)面，我們往往需要通過(guò)輸入驗(yàn)證碼才能進(jìn)行登入，那我們下面就詳講一下在vue項(xiàng)目中如何配合element-ui實(shí)現(xiàn)這個(gè)功能,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了Vue圖片裁剪功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
Vue3開(kāi)發(fā)必備的六個(gè)VSCode插件推薦
在VSCode中添加好用的插件可以提高我們的開(kāi)發(fā)效率,這些可以幫助我們格式化,擴(kuò)充性,執(zhí)行最佳實(shí)踐的代碼方式,自動(dòng)完成一些瑣碎的事情,下面這篇文章主要給大家推薦介紹了關(guān)于Vue3開(kāi)發(fā)必備的六個(gè)VSCode插件,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了如何在vue 中引入使用jquery，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
vue3中的ref,toRef,toRefs三個(gè)的作用使用小結(jié)
Vue3中ref、reactive、toRef、toRefs都是與響應(yīng)式數(shù)據(jù)相關(guān)的，就此做一份筆記作為區(qū)別，本文重點(diǎn)給大家講解vue3中的ref，toRef，toRefs三個(gè)是干嘛的，有什么作用，感興趣的朋友跟隨小編一起看看吧2022-11-11
element日歷calendar組件上月、今天、下月、日歷塊點(diǎn)擊事件及模板源碼
這篇文章主要介紹了element日歷calendar組件上月、今天、下月、日歷塊點(diǎn)擊事件及模板源碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
文章介紹了優(yōu)化前端項(xiàng)目性能的幾種方法,包括減小打包體積、異步加載、使用CDN、路由懶加載和組件異步加載等,以提升首屏加載速度和用戶(hù)體驗(yàn)2025-12-12
這篇文章主要介紹了詳解Nuxt.js部署及踩過(guò)的坑，Nuxt.js 提供了兩種發(fā)布部署應(yīng)用的方式：服務(wù)端渲染應(yīng)用部署 和 靜態(tài)應(yīng)用部署。本文主要說(shuō)說(shuō)服務(wù)端渲染應(yīng)用部署，感興趣的小伙伴們可以參考一下2018-08-08
組件是Vue.js最強(qiáng)大的功能之一,組件可以擴(kuò)展HTML元素,封裝可重用的代碼,這篇文章主要給大家介紹了關(guān)于vue中刷新子組件重新加載子組件三種方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要為大家介紹了vue的Des加密解密使用實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09