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

猜你喜欢

转载自www.cnblogs.com/eyed/p/10418189.html
今日推荐