我们很多时候需要用到列表点击其中的某个有相对的事件发生,那就拿用到$(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. .Net Core控制台应用加载读取Json配置文件

    ⒈添加依赖 Microsoft.Extensions.Configuration Microsoft.Extensions.Configuration.FileExtensions Microsoft ...

  2. CF39H 【Multiplication Table】

    这题可以枚举出每个i,j 位置的数>需要用到进制转换 int zh(int x){ long long sum=0,i=0; while(x){ sum=sum+((x%n)*pow(10,i) ...

  3. excel批量修改文件名称

    步骤: 1. 然后将标准号所在的列复制三份到旁边相邻的空白列 2. 使用方方格子让三列中最左面的列只保存如下格式的数据: DB37/T或DB37/ 3. 使用方方格子让三列中中间的列的只保存如下格式的 ...

  4. idea 修改pom文件jdk版本回退问题解决

    在Java开发是我们大多都使用集成开发环境,像idea和eclipse用的都比较多,在使用idea maven构建项目时,在修改pom.xml文件时,我们的项目jdk版本都会回退,还得每次去设置中修改 ...

  5. JavaEE--JavaWeb三大组件Servlet、Filter、Listener

    Servlet.Filter.Listener是JavaEE Web服务规定的服务器动态组件,由开发者编写由Web容器创建,并保证单例以及线程安全性,其中加载顺序为Linstener -> Fl ...

  6. opencv中的高维矩阵Mat

    本示例程序主要是通过实例演示高维Mat的寻址方式. //3,4分别表示行数.列数,所以3*4是一个页面的元素数,2表示有2个3*4 ,b=,c=; int size[]={a,b,c}; float* ...

  7. $store.getters调用不执行

    $store.getters调用不执行 api:https://vuex.vuejs.org/zh/guide/getters.html 场景: 在登录时将登录得到的用户信息存储在vuex的state ...

  8. 帝国cms 反馈

    <form name='feedback' method='post' enctype='multipart/form-data' action='/e/enews/index.php' ons ...

  9. js的作用主要这么几个

    js的作用主要有这么几个表单验证:网页上,用户输入的信息需要进行验证,在客户端验证,可以减少对服务器端的压力.所以,你应该把握正则表达式方面的知识.网页特效:页面上很多特效是非常好的,能产生很好的用户 ...

  10. 微信支付成功没有回调遇到的坑 onBridgeReady getBrandWCPayRequest wx.chooseWXPay

    最近在调微信支付,遇到一个问题,就是支付成功回调不执行的. 遇到的问题就是   苹果手机 支付成功没有进到回调函数里,但是支付的时候,点击取消支付是可以进到回调函数里的.    安卓手机测试一切正常! ...