<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. C语言的函数指针数组(好绕啊~看完这篇估计就通关了)

    转自https://www.cnblogs.com/chr-wonder/p/5168858.html int *(*p(int))[3] 今天有人问这个是啥?我一看直接就懵逼了…… 下面做一些简单的 ...

  2. linux下的/dev/shm/ 以及与swap目录的区别【转】

    /dev/shm 概念 首先可以看出来/dev/shm是一个设备文件, 可以把/dev/shm看作是系统内存的入口, 可以把它看做是一块物理存储设备,一个tmp filesystem, 你可以通过这个 ...

  3. java 代码

    java 里的 pandas tablesaw DataFrame 再有就是 spark 了 java 代码规范 Java8特性详解 lambda表达式 Stream Sonar 规则检测 sprin ...

  4. 教你如何绘制数学函数图像——numpy和matplotlib的简单应用

    numpy和matplotlib的简单应用 一.numpy库 1.什么是numpy NumPy系统是Python的一种开源的数值计算扩展.这种工具可用来存储和处理大型矩阵,比Python自身的嵌套列表 ...

  5. Thunk

    Thunk https://en.wikipedia.org/wiki/Thunk In computer programming, a thunk is a subroutine used to i ...

  6. 开放源代码的设计层面框架Spring——day01

    spring第一天     一.Spring概述         1.1spring概述             1.1.1spring介绍                 Spring是分层的Jav ...

  7. XSS绕过小结

    0x00前言 我们友情进行XSS检查,偶然跳出个小弹窗,其中我们总结了一些平时可能用到的XSS插入方式,方便我们以后进行快速检查,也提供了一定的思路,其中XSS有反射.存储.DOM这三类,至于具体每个 ...

  8. 20175306 迭代和JDB调试

    迭代和JDB调试 1.使用C(n,m)=C(n-1,m-1)+C(n-1,m)公式进行递归编程实现求组合数C(m,n)的功能 代码展示: public class C { public static ...

  9. 【译】索引进阶(十一):SQL SERVER中的索引碎片【上篇】

    原文链接:传送门. 第十章节我们分析了索引的内部结构.有了这些关于索引结构的知识,我们便可以分析索引碎片了:其产生的原因,如何防止,以及何时可以不去关注它们. 一些背景知识 / 复习 以下知识对于理解 ...

  10. Charles+iPhone配置ssl证书

    Charles+iPhone配置ssl证书 一.手机 1. 配置代理 设置->无线局域网->选和电脑同一网络的无线->配置代理->手动 服务器配置电脑的IP,端口设置为8888 ...