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)了,