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+element-ui集成随机验证码+用户名+密码的form表单验证功能
在登入页面，我们往往需要通过输入验证码才能进行登入，那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能,需要的朋友可以参考下
2018-08-08
Vue图片裁剪功能实现代码
这篇文章主要介绍了Vue图片裁剪功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-08-08
Vue3开发必备的六个VSCode插件推荐
在VSCode中添加好用的插件可以提高我们的开发效率,这些可以帮助我们格式化,扩充性,执行最佳实践的代码方式,自动完成一些琐碎的事情,下面这篇文章主要给大家推荐介绍了关于Vue3开发必备的六个VSCode插件,需要的朋友可以参考下
2022-12-12
如何在vue 中引入使用jquery
这篇文章主要介绍了如何在vue 中引入使用jquery，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2020-11-11
vue3中的ref,toRef,toRefs三个的作用使用小结
Vue3中ref、reactive、toRef、toRefs都是与响应式数据相关的，就此做一份笔记作为区别，本文重点给大家讲解vue3中的ref，toRef，toRefs三个是干嘛的，有什么作用，感兴趣的朋友跟随小编一起看看吧
2022-11-11
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
这篇文章主要介绍了element日历calendar组件上月、今天、下月、日历块点击事件及模板源码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
Vite+Vue3加载速度优化全过程
文章介绍了优化前端项目性能的几种方法,包括减小打包体积、异步加载、使用CDN、路由懒加载和组件异步加载等,以提升首屏加载速度和用户体验
2025-12-12
详解Nuxt.js部署及踩过的坑
这篇文章主要介绍了详解Nuxt.js部署及踩过的坑，Nuxt.js 提供了两种发布部署应用的方式：服务端渲染应用部署和静态应用部署。本文主要说说服务端渲染应用部署，感兴趣的小伙伴们可以参考一下
2018-08-08
vue中刷新子组件重新加载子组件三种方法
组件是Vue.js最强大的功能之一,组件可以扩展HTML元素,封装可重用的代码,这篇文章主要给大家介绍了关于vue中刷新子组件重新加载子组件三种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-12-12
详解vue的Des加密解密
这篇文章主要为大家介绍了vue的Des加密解密使用实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09