我们很多时候需要用到列表点击其中的某个有相对的事件发生,那就拿用到$(this),但是在vue里面,直接写$(this)获取不到指定的元素,所以我就用的下面这种写法

              <div v-for="(item,i) of entity.dayTaskMatters" class="checkItem" @mouseenter="showRemove($event)" @mouseleave="hideRemove($event)">
<div style="display: flex;">
<el-input class="chkName" v-model="item.name" placeholder="请输入检查项" :id="chenkTitleId(i)"></el-input>
<el-input class="chkRemark" v-model="item.remark" placeholder="请输入任务描述" :id="checkRemarkId(i)"></el-input>
<i class="fa fa-trash-o remove" aria-hidden="true" @click="removeItem(i,item.id)"></i>
</div>
</div>

这里是鼠标移入某一行,这行显示删除按钮<i></i>鼠标移出,删除按钮隐藏

            // 显示删除按钮
showRemove(event) {
let target = event.target
$(target).children().children('.remove').show()
},
// 隐藏删除按钮
hideRemove(event) {
let target = event.target
$(target).children().children('.remove').hide()
},

这里我们通过$event来确定指定项,声明一个变量,这里的$(target)就相当于$(this)了,

VUE里面的$(this)的更多相关文章

  1. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  2. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  3. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  4. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  5. Vue + Webpack + Vue-loader 系列教程(2)相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  6. Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

  7. 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库

    应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...

  8. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  10. 初探Vue

    Vue.js(读音/vju:/,类似于view),是近来比较火的前端框架,但一直没有怎么具体了解.实现过,就知道个啥的MVVM啦,数据驱动啦,等这些关于Vue的虚概念. 由于最近,小生在公司中,负责开 ...

随机推荐

  1. Kick Start 2019 Round A Parcels

    题目大意 $R \times C$ 的网格,格子间的距离取曼哈顿距离.有些格子是邮局.现在可以把至多一个不是邮局的格子变成邮局,问每个格子到最近的邮局的曼哈顿距离的最大值最小是多少. 数据范围 $ 1 ...

  2. 禁止ios10双指缩放

    document.addEventListener('gesturestart', function(event) { event.preventDefault(); });

  3. 主流浏览器内核(IE、Chrome、Firefox、Safari、Opera)

    IE浏览器,使用Trident浏览器内核,又称为IE内核.只用于Windows平台,而且并不是开源的: chrome浏览器,目前使用的是Blink浏览器内核.浏览器内核的演进过程:Chromium  ...

  4. [转] JAVA分为三个体系,JavaSE,JavaEE,JavaME(J2ME)的区别以及各个版

        Java SE(JavaPlatform,Standard Edition).Java SE 以前称为 J2SE.它允许开发和部署在桌面.服务器.嵌入式环境和实时环境中使用的 Java 应用程 ...

  5. Delphi ComboBox组件

  6. KVM和Docker的对比

    虚拟化技术对比: KVM:全虚拟化,需要模拟各种硬件 docker:严格来说不算是虚拟化技术,只是进程隔离和资源限制 实例启动进程对比: 在kvm虚拟机中执行top命令,看宿主机进程树,根本看不到to ...

  7. C语言字符串操作小结

    1)字符串操作strcpy(p, p1) 复制字符串strncpy(p, p1, n) 复制指定长度字符串strcat(p, p1) 附加字符串strncat(p, p1, n) 附加指定长度字符串s ...

  8. Python测开面试题之装饰器

    Python的装饰器是面试常被问到的问题之一,在面试Python测试开发时被问到的概率不低于70%,那么装饰器的原理是什么,怎么快速写出一个装饰器呢,接下来我们详细讲解装饰器的实现方法. Python ...

  9. Summer training round2 #9(Training28)

    A:签到题 C:模拟搜索题 #include <bits/stdc++.h> #include <cstring> #include <iostream> #inc ...

  10. 紫书 例题 10-11 UVa 11181(概率计算)

    这道题不能凭感觉做了.要套公式 r个人买了东西叫事件E, 第i个人买东西的概率叫做事件Ei 求得是P(E|Ei), 则P(E|Ei)= P(E|Ei)/ P(E) 那么P(E)可以枚举求得, 用递归求 ...