Vue根据条件添加click事件的方式
需求:根据特定条件,增加或者去掉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事件的方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
vue 的点击事件获取当前点击的元素方法
首先 vue的点击事件 是用 @click = "clickfun()" 属性 在html中绑定的, 在点击的函数中 添加$event 参数就可以 比如 <button @click = "clickfun($event)">点击</button> methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 } }, 以上这篇vue 的点击事件获取当前
-
VUE中v-on:click事件中获取当前dom元素的代码
在开发中总是忘记,特意在此记录 关键字: $event <div class="bed" v-on:click="updateBed(index,$event)">{{item.BedID}}<br>{{item.CriminalName}}</div> updateBed: function(index, e) { var selectedBedDom = $(e.srcElement)//dom元素 } PS:下面看下v-
-
Vue v-for循环之@click点击事件获取元素示例
应用背景 浏览论坛的贴子(数据库的数据通过vue遍历在html页面上) 点击帖子的标题.图片,可以查看详细的帖子(点击事件获取id) 1.设置一个隐藏值的放置Id的div,点击div就获取id,传参到后台(点击一部分) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <
-
在Vue组件中获取全局的点击事件方法
使用场景: 在Vue组件中点击某元素之外的地方移除该元素 需求: 如上图所示,"用户列表"页面有三个Vue组件组成,分别是"菜单组件","导航组件"和"列表组件".其中"列表组件"中包含一个"下拉菜单",当我们点击"下拉菜单"以外的区域隐藏下拉菜单. 解决方法一: 出现"下拉菜单"的同时,建一个透明的遮罩层,然后只有"下拉菜单"
-
vue获取当前点击的元素并传值的实例
html: <span @click='zan(pl.id)' :data-id='pl.id'></span> js: zan(e){ var target=event.target; var dataid=e;//(pl.id的值); $(target)//当前点击的dom } 以上这篇vue获取当前点击的元素并传值的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js中兄弟组件之间互相传值实例 vue.js获得
-
vue基础之事件v-onclick="函数"用法示例
本文实例讲述了vue基础之事件v-onclick=函数用法.分享给大家供大家参考,具体如下: v-on:click/mouseout/mouseover/dblclick/mousedown..... 事件: v-on:click="函数" v-on:click/mouseout/mouseover/dblclick/mousedown..... new Vue({ el:'#box', data:{ //数据 arr:['apple','banana','orange','pear'
-
Vue根据条件添加click事件的方式
需求:根据特定条件,增加或者去掉click事件(例如:clickFlag == true时,添加click事件:clickFlag == false时,去掉click事件:) 解决方法: 方式一:在绑定事件中直接添加标示量clickFlag <div @click="clickFlag && addGoodsHandler()"> 添加产品 </div> 方式二:用v-if .v-else-if.v-else 判断 <div v-if=&q
-
Antd-vue Table组件添加Click事件,实现点击某行数据教程
给Table组件添加Click事件,实现点击某行数据操作 customRow 设置行属性 Function(record, index) 通过customRow 属性给table添加自定义事件 <a-table :columns="columns" :dataSource="data" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange ,onSelec
-
jQuery为iframe的body添加click事件的实现代码
html结构如下: 复制代码 代码如下: <html> <head> <title>为body添加click事件</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript" src="jquery-1.5.2.js&quo
-
Jquery为DIV添加click事件的简单实例
今天在做一个抽奖活动时小编要做一个抽奖没有中奖之后直接弹出一个提示,然后再给div添加一个事件了,下面我们来看这个例子的做法. html <a href="javascript:void(0);" id="click_ms" > <img src="img/bbg_08.jpg" border="0" > </a> jquery事件 $('#click_ms').click(function
-
android全局监控click事件的四种方式(小结)
本文主要给大家分享如何在全局上去监听 click 点击事件,并做些通用处理或是拦截.使用场景可能就是具体的全局防快速重复点击,或是通用打点分析上报,用户行为监控等.以下将以四种不同的思路和实现方式去监控全局的点击操作,由简单到复杂逐一讲解. 方式一,适配监听接口,预留全局处理接口并作为所有监听器的基类使用 抽象出公共基类监听对象,可预留拦截机制和通用点击处理,简要代码如下: public abstract class CustClickListener implements View.OnCli
-
JS中touchstart事件与click事件冲突的解决方法
前言 移动互联网是未来的发展趋势,现在国内很多互联网大佬都在争取移动这一块大饼,如微信及支付宝是目前比较成功的例子,当然还有各种APP和web运用. 下面这篇文章主要介绍了关于JS中touchstart事件与click事件冲突解决的相关内容,下面话不多说了,来一起看看详细的介绍吧. 一 · 业务场景的描述 在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart 事件代替 cl
-
Unity 按钮添加OnClick事件操作
1.在Hierarchy面板右键UI>Button 2.创建一个空物体 3.创建一个脚本 ButtonClick.cs,定义一个Click方法(必须为Public) 4.把脚本挂在到空物体上 5.将空物体拖到如下图 None(Object) 位置 6.在右侧选择 ButtonClick>Click 方法 7.如下 补充:Unity三种添加Click事件 我就废话不多说了,大家还是直接看代码吧~ public Button btn; void Start () { // 一.btn.onClic
-
vue @click @tap重叠事件区分方式
目录 @click @tap重叠事件区分 click和tap事件的区别 click事件 tap事件 点透问题 @click @tap重叠事件区分 点击remove事件会触发details事件,使用@click.stop 官方介绍 <ul> <li v-for="item in data.list" :key="item.id" @click="details(item)"> <font @cl
-
解决vue的touchStart事件及click事件冲突问题
一 .问题: 今天遇到这样问题,给某个元素同时绑定touchStart及click事件后,若在移动设备上,当你点击时,会依次出发这两个事件.因为移动端设备上的click事件触发是会延迟300ms,所以touchStart事件会先触发后再触发click事件.这样导致每次都要执行两次,这样毫无意义.这里提醒下,PC是无法识别touch相关事件 二.解决方式 (1)preventDefault方法 通过使用preventDefault方法(阻止元素默认事件行为的发生)来解决.在touchstart中添
-
vue中touch和click共存的解决方式
在vue开发手机端项目时,我们经常会遇到touch和click共存的情况,比如城市选择页面的字母滑动 touch事件在手机端会触发浏览器滑动,所以应给touch事件添加阻止默认行为touchmove.prevent.注意阻止默认行为事件不要添加在touchstart事件上,会影响到click事件的发生. touch事件和click事件发生先后顺序: touchstart,touchmove,touchend,click 补充知识:touchstart与click同时触发 产生冲突的原因 我们可以
随机推荐
- 使用Python的Tornado框架实现一个简单的WebQQ机器人
- 将字符串小写转大写并延时输出的批处理代码
- apache 虚拟主机配置技巧
- Hibernate三种状态和Session常用的方法
- ASP.net的验证控件浅析
- PHP实现四种基础排序算法的运行时间比较(推荐)
- Android系统中使用shareuserid获取系统权限的教程
- php通过分类列表产生分类树数组的方法
- Laravel中log无法写入问题的解决
- js 操作select和option常用代码整理
- 基于jquery实现即时检查格式是否正确的表单
- ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
- jQuery Position方法使用和兼容性
- jQuery EasyUI NumberBox(数字框)的用法
- JS小功能(列表页面隔行变色)简单实现
- JavaScript实现阿拉伯数字和中文数字互相转换
- javascript运行机制之this详细介绍
- Linux的使用
- java 中ThreadLocal实例分析
- 从vue基础开始创建一个简单的增删改查的实例代码(推荐)