<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. 计算机网络(HTTP)之客户识别:cookie机制

    什么是cookie? 承载用户相关信息的HTTP首部 cookie的工作原理 cookie的缺陷 一.什么是cookie? cookie是由服务器生成,发送给USER-Agent(一般是浏览器),(服 ...

  2. 【转】Nginx 学习笔记(十一)nginx下安装配置naxsi waf防火墙(附完整编译、配置)

    原文地址:http://f2ex.cn/nginx-installed-configuration-naxsi-waf/ Naxsi 是第三方 nginx 模块 ,它和 Modsecurity 都是开 ...

  3. JGUI源码:prefixfree 这个库有时候会引起网页一直加载中(10)

    如题,大部分情况下正常,但是chrome频繁刷新时,会出现这个问题,控制台没有异常信息.最终放弃使用引用第三方库prefixfree.min.js

  4. MySQL启动出现The server quit without updating PID file错误解决办法

    启动mysql服务的时候报下面这个错: 之间网上搜了各种办法,有重新初始化的(这怎么可能,里面还有数据...),有修改启动脚本的等等,但是都没用. 其实解决办法非常简单粗暴,那就是把/etc/my.c ...

  5. 网络结构---从alexnet 到resnet

    AlexNet-> vgg vgg 采用更小的卷积核,加深网络深度,但两者的共同点都是卷积层+pooling层最后接上fc 层的结构 Network in network ->google ...

  6. Arduino—运算符

    赋值运算符: =    +=   -+     *=      /= %=       取余等于 &=    与等于 &=(与等于)对某个变量的值按位进行与运算,例如:G&=x ...

  7. Linux之防火墙管理篇[Ubuntu:ufw]

    前言 由于近期,腾讯云服务器就要到期了,学生优惠即将失效了,所以准备将数据库和项目迁移到vultr上.然而,在使用nivicat连接mysql数据库的过程中,却屡次出现:Can't connect t ...

  8. 堆应用---构造Huffman树(C++实现)

    堆: 堆是STL中priority_queue的最高效的实现方式(关于priority_queue的用法:http://www.cnblogs.com/flyoung2008/articles/213 ...

  9. Spring ES

    elasticsearchTemplate 和 ElasticsearchRepository JPA中有个ElasticsearchRepository可以做Elasticsearch的相关增删改查 ...

  10. mac 删除文件夹里所有的.svn文件

    先用命令行,进入你要删除的文件夹中(./ 为这个文件夹的当前路径,也可以填写绝对路径) 命令行下输入: sudo find ./ -name ".svn" -exec rm -r ...