Vue根据条件添加click事件的方式


Posted in Javascript onNovember 09, 2019

需求:根据特定条件,增加或者去掉click事件(例如:clickFlag == true时,添加click事件;clickFlag == false时,去掉click事件;)

解决方法:

方式一:在绑定事件中直接添加标示量clickFlag

<div @click="clickFlag && addGoodsHandler()">
 添加产品
</div>

方式二:用v-if 、v-else-if、v-else 判断

<div v-if="clickFlag" @click="addGoodsHandler()">
 添加产品
</div>
<div v-else>
 添加产品
</div>

以上这篇Vue根据条件添加click事件的方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery上传插件 uploadify v3.1使用说明
Jun 18 Javascript
JS Map 和 List 的简单实现代码
Jul 08 Javascript
jQuery中:enabled选择器用法实例
Jan 04 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
Jan 23 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 Javascript
浅谈vuex中store的命名空间
Nov 08 #Javascript
解决$store.getters调用不执行的问题
Nov 08 #Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 #Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 #Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 #Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 #Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 #Javascript
You might like
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
2016/08/26 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
python 获取et和excel的版本号
2009/04/09 Python
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
python安装与使用redis的方法
2016/04/19 Python
Numpy掩码式数组详解
2018/04/17 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
Python实现FM算法解析
2019/06/18 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
优秀的毕业生的自我评价
2013/12/12 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
成都人事代理协议书
2014/10/25 职场文书
党员年度个人总结
2015/02/14 职场文书
中秋节寄语2015
2015/03/24 职场文书
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS