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. String对象内存分析

    Java中内存分析: 栈(Stack) :存放基本类型的变量数据和对象的引用,但对象本身不存放在栈中,而是存放在堆(new 出来的对象)或者常量池中(字符串常量对象存放在常量池中). 堆(heap): ...

  2. 安装 Python IDLE (Linux)

    Python IDLE (Integrated Development and Learning Environment) 是一个官方的轻量级 Python IDE.在不同的 Linux 的发布版本中 ...

  3. [翻译] JSAnimatedImagesView

    JSAnimatedImagesView 本人测试的效果: Description:描述 Easy to use UIView subclass to quickly add a cool anima ...

  4. java获取每月的最后一天

    public static void main(String[] args) throws ParseException { // 获取当月的天数(需完善) SimpleDateFormat date ...

  5. webbench 网站压力测试

    [root@localhost ~]# webbench -c 500 -t 4 http://172.24.61.41/Webbench - Simple Web Benchmark 1.5Copy ...

  6. PHP修改图片

    这篇是关于修改图片的效果,主要还是用到php中的GD库中的函数,没想到php还有这凶残能力,出乎我的预料. 先看代码upload_image.php,主要是一个上传控件,用来选择图片 <html ...

  7. poi导出excel出现本工作薄不能再使用其他新字体的解决方法

    最近使用POI处理EXCEL,当处理的单元格太多时,就会出现,本工作薄使用字体过多,不能再使用其他新的字体的是提示. 网上很多方法告诉我,要怎么修改excel文件,但是这个解决不了问题啊,难道让客户去 ...

  8. 【NOIP2017】宝藏

    题目描述 参与考古挖掘的小明得到了一份藏宝图,藏宝图上标出了 \(n\) 个深埋在地下的宝藏屋, 也给出了这 \(n\) 个宝藏屋之间可供开发的 \(m\) 条道路和它们的长度. 小明决心亲自前往挖掘 ...

  9. [19/04/15-星期一] 基于Socket(套接字)的TCP和UDP通讯的实现

    一.TCP 在网络通讯中,第一次主动发起通讯的程序被称作客户端(Client)程序,简称客户端,而在第一次通讯中等待连接的程序被称作服务器端(Server)程序, 简称服务器.一旦通讯建立,则客户端和 ...

  10. ArcFac_C#_DEMO开发

    手上有一个项目,需要检验使用本程序的,是否本人!因为在程序使用前,我们都已经做过头像现场采集,所以源头呢是不成问题的,那么人脸检测,人脸比对,怎么办呢?度娘了下,目前流行的几个人脸检测,人脸比对核心, ...