我们很多时候需要用到列表点击其中的某个有相对的事件发生,那就拿用到$(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. HTML(上)

    目录 HTML(上) 浏览器 HTML 什么是HTML HTML的作用 编写HTML的规范 HTML结构 HTML常用标签 HTML标签速记 HTML(上) 浏览器 浏览器也是一个客户端 #这是一个服 ...

  2. 仿优酷项目—orm

    仿优酷项目 一.ORM介绍 对象关系映射,把数据库中的表数据(表名.表记录.字段)全部映射到python中. ​ mysql: python: ​ 表名 ---->类名 ​ 记录 ----> ...

  3. Spring Boot全局支持CORS(跨源请求)

    import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet. ...

  4. Redhat 7修改主机名

    修改主机名: Linux master2 3.10.0-693.el7.x86_64 #1 SMP Thu Jul 6 19:56:57 EDT 2017 x86_64 x86_64 x86_64 G ...

  5. mysoft

    @@a8649fbb56349908b5ca6708fb94b3ddabcf6b97381a9797d3dfb139b8749287117@@##74e02e1207e5a0a8996ba89f1d6 ...

  6. nginx服务学习第二章

    nginx.config文件中字符串不显示高亮 nginx服务搭建完成后,查看nginx.config的时候发现没有高亮字符,要想配置文件出现高亮方便观看,需要修改一些配置文件,修改步骤如下: # m ...

  7. [HDU 3521] [最小割] Being a Hero

    题意: 在一个有向图中,有n个点,m条边$n \le 1000 \And \And  m \le 100000$ 每条边有一个破坏的花费,有些点可以被选择并获得对应的金币. 假设一个可以选的点是$x$ ...

  8. 动画学习之Music图形绘制

    今天来实现一个类似于网易云音乐类似的动态效果,在用网易云音乐听歌时会有一个类似这样的效果,如下: 而咱们这次要实现的效果如下: music图形的绘制: 在实现动画之前先来将静态的图形绘制出来, 如下: ...

  9. Summer training round2 #4 (Training #20)

    A!:UESTC1752 B!:找区间内L到R之间内的数的个数  权值分块加莫队 C!:给你一个哈斯图 去掉其中的几条边 要求输出字典序最大的拓扑排序:线段树模拟拓扑排序 D!:要求你找到最短路树并输 ...

  10. 用Ant实现Java项目的自动构建和部署(转载以作收藏)

    原文地址:http://tech.it168.com/j/2007-11-09/200711091344781.shtml        本文请勿转载! Ant是一个Apache基金会下的跨平台的构件 ...