VUE里面的$(this)
我们很多时候需要用到列表点击其中的某个有相对的事件发生,那就拿用到$(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)的更多相关文章
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- Vue + Webpack + Vue-loader 系列教程(2)相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
- Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
- 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库
应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- 初探Vue
Vue.js(读音/vju:/,类似于view),是近来比较火的前端框架,但一直没有怎么具体了解.实现过,就知道个啥的MVVM啦,数据驱动啦,等这些关于Vue的虚概念. 由于最近,小生在公司中,负责开 ...
随机推荐
- 树莓派USB存储设备自动挂载并通过脚本实现自动拷贝,自动播放视频,脚本自动升级等功能
需求:首先需要树莓派自动挂载USB设备,然后扫描USB指定目录下文件,将相关文件拷贝至树莓派指定目录,然后通过omxplayer循环播放新拷贝文件视频 1. 树莓派实现USB存储设备自动挂载 树莓派U ...
- CentOS下安装DockerCE
title: CentOS下安装DockerCE comments: false date: 2019-09-04 09:47:58 description: 在CentOS下安装社区版Docker ...
- Linux经典操作
1.Linux批量终止在运行中包含某个字符串的所有进程. ps -ef|grep celery | grep -v grep|cut -c 9-15|xargs kill -9
- 详解Wox
Wox 是一款国产开源免费的软件快捷启动工具,它可以快速搜索并打开你电脑上的程序.文件.或是查词翻译.网站查找等其他操作,同时还支持插件安装. Tips: 如果你需要用到文件的快速搜索.打开功能,需要 ...
- python之requests示例
一) import requests def download(url, num_tries=, user_agent='wswp', proxies=None): ''' 下载指定url并返回网页内 ...
- vscod插件
Babel JavaScript Code Runner Debugger for Chrome ESLint HTML CSS Support HTML Snippets background J ...
- win7(64位旗舰版)visual studio 2017无法安装及vs2015闪退问题解决方式
折腾了两天,几乎试了网上说的所有方法(就差重装系统了,看到有人说重装系统之后还是同样的问题,果断放弃重装),visual studio 2017的安装问题终于解决了,为了帮助同样还在折腾的初级开发者们 ...
- CentOS7 SVN基本配置
开机自启指令如下 systemctl enable svnserve.service 对应可执行脚本文件路径 vim /etc/sysconfig/svnserve 查看状态: ps -ef|grep ...
- 手把手教你查看网站遭受到的Web应用攻击类型
常见Web应用攻击类型有:webshell.SQL注入.文件包含.CC攻击.XSS跨站脚本攻击.敏感文件访问.远程命令.恶意扫描.代码执行.恶意采集.特殊攻击.其他攻击十二种攻击类型. 如何查看网站遭 ...
- 网上搜到的特别厉害的visio2019激活方法
原文链接:https://blog.csdn.net/godot06/article/details/94141854 步骤如下: 1.电脑新建一个记事本文件.txt(任何地方都可以) 2.复制下面代 ...