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. Android深入四大组件(五)Android8.0 根Activity启动过程(后篇)

    前言 在几个月前我写了Android深入四大组件(一)应用程序启动过程(前篇)和Android深入四大组件(一)应用程序启动过程(后篇)这两篇文章,它们都是基于Android 7.0,当我开始阅读An ...

  2. MySQL 练习题2

    CREATE TABLE `dept` ( `did` ) NOT NULL AUTO_INCREMENT, `dname` ) DEFAULT NULL, `address` ) DEFAULT N ...

  3. 【Python系列】Python包管理器pip

    缘起 这段时间忙着给朋友搞事,忙了好长一段时间,木有写博客很长时间了.之间做了两个东西,一个是邮件自动发送脚本,一个是数据处理软件.其中,在做数据处理软件的时候使用到了非Python系统库,是两个第三 ...

  4. webpack学习笔记丁点积累

    webpack是什么? https://webpack.js.org/concepts/ https://code.tutsplus.com/tutorials/introduction-to-web ...

  5. Unity IOC/DI使用

    一.IOC介绍 IOC(Inversion of Control),中文译为控制反转,又称为“依赖注入”(DI =Dependence Injection) IOC的基本概念是:不创建对象,但是描述创 ...

  6. 集合、深浅copy

    集合set: 集合也和列表数组一样有增加,但是集合是真正的没有顺序的  所以集合无法查找的,并且集合的外观你看着好像是字典和列表的组合,因为它是用字典的括号一样 ,但是又是里面并没有键值对  只是一个 ...

  7. eclipse直接使用tomcat安装程序的webapp目录调试

    感谢此文:http://blog.csdn.net/soszou/article/details/23673133 本文很多技术及操作来源于此文 需求:因为微信方面的开发调试.为了测试方便,直接构建了 ...

  8. 计算机应用基础PPT flash作业

  9. 第九次,mp3

  10. python基础语法2

    一.顺序结构 顺序结构就是从上而下的一步一步的执行每行程序语句. 二.分支结构(if) 形式1: if 条件: pass 形式2: if 条件: pass else: pass 形式3: if 条件: ...