<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. 深入剖析Kubernetes学习笔记:容器基础(05-06)

    05 :从进程说起 1.容器本身没有价值,有价值的是"容器编排" 2.什么是进程? 一旦"程序"被执行起来,它就从磁盘上的二进制文件,变成 1.计算机内存中的数 ...

  2. MongoDB用户权限认证

    关于用户的认证及权限 用户是跟着库创建的,在哪个库创建的什么权限的什么用户,只对此库有相应权限(除超级管理员以外). 官网文档:https://docs.mongodb.com/master/refe ...

  3. vue根据ajax绑定数数。。

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. [C++]UVaLive7324 ASCII Addtion

    Description Nowadays, there are smartphone applications that instantly translate text and even solve ...

  5. Exp4 恶意代码分析 20164314

    一.实践目标 1.是监控你自己系统的运行状态,看有没有可疑的程序在运行. 2.是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysinternals,systr ...

  6. HttpClient基本使用

    1.在pom.xml加入对httpclient的必需的jar包的依赖 <!--//httpclient的接口基本都在这儿--> <dependency> <groupId ...

  7. python之面试复习

    待整理:osi七层协议,tcp三次握手四次挥手 1.Http协议(超文本传输协议) 是一种传输数据的格式. 建立在TCP之上 一次请求一次响应,然后断开连接(短连接,无状态) 请求:请求头 \r\n\ ...

  8. linux常用命令【原创】

    查看文件内容-while: cat 1.txt|while read line;do echo $line;done while read line; do echo $line; done < ...

  9. dos.orm的事务处理

    dos.orm也包含事务处理,没有太多封装,这里有几个简单的示例代码. using (DbTrans trans = DbSession.Default.BeginTransaction()) { D ...

  10. Pompholyx - Causes, Symptoms and Treatment

    Pompholyx is a common type of eczema. It is also known as dyshidrotic eczema or vesicular eczema of ...