<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. Elasticsearch 快速开始

    Elasticsearch 是一个分布式的 RESTful 风格的搜索和数据分析引擎. 查询 : Elasticsearch 允许执行和合并多种类型的搜索 - 结构化.非结构化.地理位置.度量指标 - ...

  2. linux mint18 cinnamon 64bit 安装 docker

    参考官方文档:https://docs.docker.com/engine/installation/linux/ubuntu/ 1. 安装一些使 apt 可以使用 https 的源 sudo apt ...

  3. SQL SERVER获取信息的方法

    获取数据库的表 SELECT obj.name tablename, schem.name schemname, CAST ( CASE ) ) END AS BIT) HasPrimaryKey f ...

  4. 上传Jcenter

    将自己封装的库发布分享到Jcenter

  5. nginx做80端口转发

    server { server_name zjrzb.cn listen 80; location / { proxy_pass http://127.0.0.1:8090; proxy_set_he ...

  6. $HOME

    Ubuntu中 命令行输入$HOME bash: /home/XXX: Is a directory $HOME 是用户主目录

  7. Deep Mutual Learning

    论文地址: https://arxiv.org/abs/1706.00384 论文简介 该论文探讨了一种与模型蒸馏(model distillation)相关却不同的模型---即相互学习(mutual ...

  8. 多个python版本共存

    windows下多个python版本共存 了解python的人都知道python有2.x版本和3.x版本,而python3.x版本不向下兼容,但是根据具体的需要,有时候要2.x和3.x共存,pytho ...

  9. 题解-HAOI2018全套

    去冬令营转了一圈发现自己比别人差根源在于刷题少,见过的套路少(>ω<) 于是闲来无事把历年省选题做了一些 链接放的都是洛谷的,bz偷懒放的也是链接 AM.T1 奇怪的背包 Problem ...

  10. CSScript 使用纪要

    CSScript 运行C#脚本的开源项目,在笔者简要使用过程中,遇到了一些问题,现简单记录. 1. CS0433 使用非基本类型 当遇到 CS0433错误,提示 type is defined mul ...