vue中的事件加判断条件如何进行选择性点击

更新时间：2024年03月07日 08:50:05 作者：document_write

这篇文章主要介绍了vue中的事件加判断条件如何进行选择性点击方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue中事件加判断条件进行选择性点击

 @click="(items.length>1)?choose(items):''"

vue点击事件根据条件判断是否可以点击

需求

根据特定条件，增加或者去掉click事件

（例如：clickFlag == true时，添加click事件；clickFlag == false时，去掉click事件；）

解决方法

方式一：在绑定事件中直接添加标示量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>

很明显，第一种感觉更高级，用更少的代码完成功能，Write less，Do more

总结

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

您可能感兴趣的文章:

vue如何实时往数组里追加数据
这篇文章主要介绍了vue如何实时往数组里追加数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue-cli 3.x 修改dist路径的方法
今天小编就为大家分享一篇vue-cli 3.x 修改dist路径的方法，具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
详解Vue自定义指令如何实现处理图片加载失败的碎图
这篇文章主要介绍了详解Vue自定义指令如何实现处理图片加载失败的碎图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2023-02-02
详解vee-validate的使用个人小结
本篇文章主要介绍了详解vee-validate的使用个人小结，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-06-06
Vue.js element-plus使用图标不显示问题的解决方式
近期在学习Vue时用elementUI时发现图标在页面上显示不出来,所以这篇文章主要给大家介绍了关于Vue.js element-plus使用图标不显示问题的解决方式,需要的朋友可以参考下
2022-09-09
前端虚拟滚动列表实现代码(vue虚拟列表)
前端的性能瓶颈那就是页面的卡顿,当然这种页面的卡顿包含了多种原因,下面这篇文章主要给大家介绍了关于前端虚拟滚动列表实现的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-06-06
vue中路由router配置步骤详解
vue的主要思想是组件化开发,路由用来配置组件对应展示路径,本文给大家介绍vue中路由router配置步骤,创建路由文件——使用路由——配置路由出口,使路由配置内容展示在页面上,感兴趣的朋友跟随小编一起看看吧
2023-12-12
vue如何使用html2canvas和JsPDF导出pdf组件
这篇文章主要介绍了vue如何使用html2canvas和JsPDF导出pdf组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-09-09
vue2.0实现分页组件的实例代码
这篇文章主要介绍了vue2.0实现分页组件的实例代码,需要的朋友可以参考下
2017-06-06
Vue实现Tab选项卡切换
这篇文章主要为大家详细介绍了Vue实现Tab选项卡切换，点击不同标题显示对应图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09