vue获取当前对象
<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获取当前对象的更多相关文章
- vue 获取时间戳对象转换为日期格式
//1. 简单页面展示用<template> <!-- time为时间戳 --> <div>{{time | formatDate}}</div> &l ...
- Vue获取dom和数据监听
Vue获取dom对象 在js和jq中我们都能获取dom对象例如 // 获取id=1的div标签 <div id=d1>dom对象</div> // js语法 let ele = ...
- vue 获取组件 和 dom 对象 ref/el
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- vue事件获取事件对象,vue获取事件源,vue event.currentTarget
js的事件,如点击事件,可以直接用this获取事件对象,而jQuery可以使用$(this)来获取事件对象.vue必须借助事件的 event 对象 的 currentTarget 才能获取事件对象 v ...
- 二、vue响应式对象
Object.defineProperty Object.defineProperty 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象,先来看一下它的语法: Obj ...
- WebAPI中无法获取Session对象的解决办法
在MVC的WebApi中默认是没有开启Session会话支持的.需要在Global中重写Init方法来指定会话需要支持的类型 public override void Init() { PostAut ...
- 《Entity Framework 6 Recipes》中文翻译系列 (45) ------ 第八章 POCO之获取原始对象与手工同步对象图和变化跟踪器
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 8-6 获取原始对象 问题 你正在使用POCO,想从数据库获取原始对象. 解决方案 ...
- js和jquery获取当前对象的子元素
开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...
- 获取Graphics对象的方法
在做自定义控件时或者GDI+的时候经常会遇到获取Graphics实例的问题.一般有三种获取方式 1.从Paint事件的参数中获取.窗体和许多控件都有一个Paint事件,有一个PaintEventArg ...
随机推荐
- 电脑右键新建excel工作表,但是扩展名是.xls,而不是.xlsx
怀疑是因为之前安装了wps,然后又卸载了,导致的.上网查阅,如下: excel默认新建xls 不是我的问题 Excel 2010/2013/2016在鼠标右键新建xls或xlsx文件后,打开报错“无法 ...
- CPU或以太网模块重启DHCP请求
最近,带了一个实习生,一天: 他:师傅,PLC如何首次分配IP地址啊? 我:不是教过你了吗? 他:我怎么用BOOTP软件,半天没有反应啊? 我:..... 原来,他做实验的CPU已经被分配IP地址了, ...
- Hibernate-注解
一, 为啥用注解 Hibernate注解使得原本放在xml文件中的信息直接表现在类中 为什么要用注解呢,因为注解可以简洁快速地在编写代码的同时实现映射关系 注解的好处就是语言简洁,即插即用. 坏处就 ...
- Interface Comparable<T>
Interface Comparable<T> : 该接口对实现它的每个类的对象强加一个整体排序. 这个排序被称为类的自然排序 ,类的compareTo方法被称为其自然比较方法 . 参数 ...
- 适合高要求应用的高性能MEMS IMU解决方案
对于复杂且高动态惯性配置的MEMS IMU应用,评估功能时需要考虑许多属性.在设计周期早期评估这些属性优于追逐开放性成果,从而实现“尽可能精确”.ADI近期举行的在线研讨会[适合高要求应用的高性能ME ...
- A Discriminative Feature Learning Approach for Deep Face Recognition
url: https://kpzhang93.github.io/papers/eccv2016.pdf year: ECCV2016 abstract 对于人脸识别任务来说, 网络学习到的特征具有判 ...
- django+vue
django安装配置方式略过 1.安装node.js,官网地址:https://nodejs.org/zh-cn/download/ 2.cd到项目目录下,执行npm install -g vue-c ...
- springMVC上传
1.页面 2.开始上传按钮对应的JS 3.添加文件按钮的方法,下图中1是从fast中取到的文件名称,2是文件图片的路径 下面就是后台的一些类.方法等 4.bean层,生成的get和set方法我就不写了 ...
- SSM增删改查
闲着无聊配置一遍SSM以及添加功能增删改查,如下图,其中坎坷也挺多!!! 1.工程如下图.(请忽略红叉,没有错误) 2.首先配置pom.xml文件. <project xmlns="h ...
- pycharm远程调试服务器
1.下载专业版pycharm并激活 https://blog.csdn.net/weixin_39332299/article/details/79692283 2.创建项目,设置解释器时,选择SSH ...