VUE中
html 中
<ul id="shoppingList" v-on:click="addClass($event)" class="iview-admin-draggable-list">
  <li></li>
</ul>
点击li时
js如下
addClass:function(e){
  console.log(e.target);
  if(e.target.parentNode.className=="iview-admin-draggable-list"){
    e.target.classList.toggle("deleSign");
  }
}
$event表示的是你点击的元素,不是你事件绑定的元素,事件触发默认是冒泡机制
$event中无addClass事件,但可以用$event.target.classList.add事件代替
双击事件的话就是 e.target.classList.toggle("deleSign");
 
 
 
 

vue中点击添加class,双击去掉class的更多相关文章

  1. vue中点击不同的em添加class去除兄弟级class

    vue中使用v-for循环li 怎么点击每个li中的em给添加class删除兄弟元素 <html lang="en"> <head> <meta ch ...

  2. vue中点击复制粘贴功能

    1.下载clipboard.js cnpm install clipboard --save 2.引入,可以在mian.js中全局引入也可以在单个vue中引入 import Clipboard fro ...

  3. vue中点击空白处隐藏弹框(用指令优雅地实现)

    在写vue的项目的时候,弹框经常性出现,并要求点击弹框外面,关闭弹框,那么如何实现呢?且听我一一...不了,能实现效果就好 <template> <div> <div c ...

  4. 实例:vue中点击空白区域关闭某个div图层

    <template> <div class="search" ref="searchMain"> <el-input v-mode ...

  5. vue中点击屏幕其他区域关闭自定义div弹出框

    直接上代码: mounted: function () { let that = this; $(document).on('click', function (e) { let dom = $('. ...

  6. vue中点击复制粘贴功能 clipboard 移动端

    页面是由 v-for 循环渲染出来,要给每一个结构里面的复制按钮加一个复制功能 npm install clipboard --save    安装,如果安装处问题,多安装几次,我自己也安装了好几次 ...

  7. vue中点击按钮自动截图并下载图片

    点击一个按钮,截取对应区域的界面,才对截取的界面进行裁切并下载 下载    html2canvas    npm install html2canvas  --save 引用 : import htm ...

  8. vue中点击按钮复制内容

    <el-button type="primary" round size="mini" @click="copyUrl">复制u ...

  9. vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字

    点击当前标签给其添加class,兄弟标签class删除 然后获取当前点击元素的文字 演示地址: https://xibushijie.github.io/static/addClass.html &l ...

随机推荐

  1. 路飞学城知识点3缓存知识点之二redis

    redis:支持的字符类型多,可以做持久化 memchache:只能存储到内存中,不能做持久化,仅支持字符串类型. 参考博客 redis安装服务端: github安装包 安装客户端: pip inst ...

  2. 使用 docker-machine 管理 Azure 容器虚拟机

    安装 docker-machine 请参见该链接(https://docs.docker.com/machine/install-machine "https://docs.docker.c ...

  3. Visual Staudio 2015 打开指定文件,定位到指定文件目录下

    Visual Staudio 2015 项目定位文件位置 每次使用的Visual Staudio 2015 写代码的时候总是打开了.cs文件或xaml文件时, 还要手动去找该 文件位置,每次都要翻好大 ...

  4. 给腾讯云Linux主机创建Swap文件

    新买的腾讯云主机没有提供Swap分区 理由是由于主机经常因为内存使用率过高,频繁使用Swap,导致磁盘IO过高,服务器整体性能反而下降. 不过用户依然可以使用Swap文件的方式添加Swap. 方法如下 ...

  5. 关于UITableView 不能回调 tableView: cellForRowAtIndexPath的问题

    做项目时始终遇到一个问题,tableview不能回调cellForRowAtIndexPath方法,导致cell不能显示. 在网上没找到合理的解决方案. 自己弄了一下,按照自己的推测解决了这个问题 首 ...

  6. struts2面试整理

    struts2的工作原理 客户端发送请求 经过一系列的过滤器 FilterDispatcher通过ActionMapper来决定这个REquest需要调用的Action FilterDispather ...

  7. memcached的操作

    memcached是一个高性能的分布式内存对象缓存系统,用于动态web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库次数,从而提高动态.数据库驱动网站的速度.memcached基于 ...

  8. CSS3动画中的位置设定问题

    水平居中的不同方法实现: position: absolute; margin: auto; left:; right:; position: absolute; left:%; -webkit-tr ...

  9. python对列表中的字典进行排序

    数据显示为: rows=[{'日期': '2018-09-04', '测试1': '50.00 %', '测试2': '100.00%'}, {'日期': '2018-09-05', '测试1': ' ...

  10. python文件读写模式 --- r,w,a,r+,w+,a+,rb,wb

    要了解文件读写模式,需要了解几种模式的区别,以及对应指针 r : 读取文件,若文件不存在则会报错 w: 写入文件,若文件不存在则会先创建再写入,会覆盖原文件 a : 写入文件,若文件不存在则会先创建再 ...