<li v-for="img in willLoadImg" @click="selectImg($event)"> <img class="loadimg" :src="img.url" :data-id="img.id" alt=""> </li>

  

我们给li标签绑定了一个点击事件selectImg(),传入了$event对象。(这里循环遍历了一个图片数组,是为了展示更好的效果,如有需要请自行定义数组及其对应的图片,可不要只是完全复制了代码来问我为什么报错神马的)

事件方法代码:

methods: {
selectImg(event) {
console.log(event.currentTarget);
console.log(event.target);
}
}

 关键在于 vue中获取当前对象的参数($event) 不能换成其他的

下面再讲一下循环遍历控件

1.js获取兄弟节点的方法:
function siblings (context) {
var siblings = [];
/*获得父节点*/
var parent = context.parentNode;
/*获得父节点的所有孩子节点*/
var childs = parent.children;
for(var i = 0; i < childs.length;i++){
if (childs[i] !== context){
siblings.push(childs[i])
}
}
return siblings ;
}

3. JQuery中的查找父节点、子节点、兄弟节点的方法:

jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class")

jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素

jQuery.children(expr).返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点

jQuery.contents(),返回下面的所有内容,包括节点和文本。这个方法和children()的区别就在于,包括空白文本,也会被作为一个

jQuery对象返回,children()则只会返回节点

jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点

jQuery.prevAll(),返回所有之前的兄弟节点

jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点

jQuery.nextAll(),返回所有之后的兄弟节点

jQuery.siblings(),返回兄弟姐妹节点,不分前后
(个人笔记仅此奉上不知道怎样才能让有需要的小伙伴看到希望你们搜对了吧)

(下一节中我会把单表增删改用SSM写出来步骤详细包含截图  从数据库到显示层全都有  感兴趣的小伙伴记得点个赞关注我

vue获取当前对象的更多相关文章

  1. vue 获取时间戳对象转换为日期格式

    //1. 简单页面展示用<template> <!-- time为时间戳 --> <div>{{time | formatDate}}</div> &l ...

  2. Vue获取dom和数据监听

    Vue获取dom对象 在js和jq中我们都能获取dom对象例如 // 获取id=1的div标签 <div id=d1>dom对象</div> // js语法 let ele = ...

  3. vue 获取组件 和 dom 对象 ref/el

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. vue事件获取事件对象,vue获取事件源,vue event.currentTarget

    js的事件,如点击事件,可以直接用this获取事件对象,而jQuery可以使用$(this)来获取事件对象.vue必须借助事件的 event 对象 的 currentTarget 才能获取事件对象 v ...

  5. 二、vue响应式对象

    Object.defineProperty Object.defineProperty 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象,先来看一下它的语法: Obj ...

  6. WebAPI中无法获取Session对象的解决办法

    在MVC的WebApi中默认是没有开启Session会话支持的.需要在Global中重写Init方法来指定会话需要支持的类型 public override void Init() { PostAut ...

  7. 《Entity Framework 6 Recipes》中文翻译系列 (45) ------ 第八章 POCO之获取原始对象与手工同步对象图和变化跟踪器

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 8-6  获取原始对象 问题 你正在使用POCO,想从数据库获取原始对象. 解决方案 ...

  8. js和jquery获取当前对象的子元素

    开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...

  9. 获取Graphics对象的方法

    在做自定义控件时或者GDI+的时候经常会遇到获取Graphics实例的问题.一般有三种获取方式 1.从Paint事件的参数中获取.窗体和许多控件都有一个Paint事件,有一个PaintEventArg ...

随机推荐

  1. 计算机网络之iframe内联框架跨域

    iframe框架同源下的数据调用 iframe框架非同源下的数据传输 一.iframe框架同源下的数据调用 1.父窗口向子窗口获取数据 //html1父级窗口 <iframe src=" ...

  2. 关于python环境配置的博客收藏

    使用anaconda的pip来扩展anaconda的库: https://www.cnblogs.com/duan-qs/p/6289339.html 一个.py文件如何调用另一个.py文件中的类和函 ...

  3. JS“盒子模型”

    列举几个常用的属性 client系列 clientWidth - 盒子真实内容的宽度[content+padding左右],不包括边线和滚动条 clientHeight - 盒子真实内容的高度[con ...

  4. (四)Python中的“四大才子”(字符串、列表、字典、集合)

    前戏:在python中把数据序列分为可变(mutable)和不可变(immutable)两种 不可变:string.int.float.tuple 特点:相同对象只是占用一个内存地址,不管有多少个变量 ...

  5. opencv中imgshow图像显示为灰色

    1.图像数据类型是否正确 2.图像是否存在 3.在imgshow()语句下添加watkey();

  6. 【5】学习C++之类的概念

    C++ 中的类(Class)可以看做C语言中结构体(Struct)的升级版.结构体是一种构造类型,可以包含若干成员变量,每个成员变量的类型可以不同:可以通过结构体来定义结构体变量,每个变量拥有相同的性 ...

  7. Navicat连接阿里云服务器Linux下的Mysql

    用Navicat连接阿里云ECS服务器上的MySQL数据库   今天用navtive连接阿里云服务器(Linux)的数据库时,老是连接不上,并且报10060错误,要通过以下两个步骤解决: 1.先进入l ...

  8. Python爬虫之12306-买票器小白源码

    研究不易 import requests import re import urllib.parse import json import datetime from collections impo ...

  9. 没有显示器如何SSH连接上树莓派

    1.在用读卡器烧录系统后先用Linux虚拟机连接上读卡器,修改 sudo gedit /etc/wpa_supplicant/wpa_supplicant.conf 加入 network={ ssid ...

  10. # 20175333曹雅坤《Java程序设计》第七周学习总结

    教材学习内容总结 第八章-常用实用类String类 构造String对象 字符串的并置 String类的常用方法 字符串与基本数据的互相转化 对象的字符串表示 字符串与字符.字节数组 正则表达式及字符 ...