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. SSM 框架-03-MyEclipse+Tomcat+MAVEN+SVN项目完整环境搭建

    SSM 框架-03-MyEclipse+Tomcat+MAVEN+SVN项目完整环境搭建 如果你是使用 Eclipse 你需要先安装 MyEclipse,请参考:SSM 框架-02-MyEclipse ...

  2. Maven 安装 eclispe

    -Dmaven.multiModuleProjectDirectory=$M2_HOME

  3. SQL捕捉blocking信息

    场景: 客户抱怨数据库慢,但是回去看的时候,可能已经不慢了,为了查出当时到底是什么原因导致数据慢,制作了下面的存储过程,然后每隔3分钟运行一遍,把blocking信息插入一个数据库中. 主要就是查询s ...

  4. 字典构造、合并(dict)、排序

    使用dict,zip方法将两个list合并为dict keys = ["b", "a", "c", "e", " ...

  5. Azure之旅

    http://www.microsoft.com/web/downloads/platform.aspx http://www.microsoft.com/en-us/download/details ...

  6. 【转】用instruments来检验你的app

    一篇非常好的关于instruments使用的文章! 连接在此

  7. Python安装第三方库 xlrd 和 xlwt 。处理Excel表格

    1. 到   https://pypi.python.org/simple/xlwt/ 和https://pypi.python.org/simple/xlrt/ 下载 xlrd  和  xlwt  ...

  8. JAVAWEB之文件的上传下载

    文件上传下载 文件上传: 本篇文章使用的文件上传的例子使用的都是原生技术,servelt+jdbc+fileupload插件,这也是笔者的习惯,当接触到某些从未接触过的东西时,总是喜欢用最原始的东西将 ...

  9. JavaScript的DOM_通过元素的class属性操作样式

    使用 style 属性可以设置行内的 CSS 样式,而通过 id 和 class 调用是最常用的方法. <script type="text/javascript"> ...

  10. python3通过qq邮箱发送邮件

    python3通过qq邮箱发送邮件 0.了解qq邮箱的SMTP QQ邮箱 POP3 和 SMTP 服务器地址设置如下: 邮箱 POP3服务器(端口995) SMTP服务器(端口465或587) qq. ...