html部分

 <div class="img-preview" v-for="(img,i) of list" :key="img.imageKey" v-on:mouseenter="changeActive(i+1)" v-on:mouseleave="removeActive(i+1)" :id="i+1"> //这样就给循环出来的div添加了不同的id
<div class="mask"></div>
<i class="el-icon-delete" @click.prevent="delImg(i)" style="display: none;"></i>
<img class="imgstyle"
:src="img.imageUrl || img.thumbUrl"
alt=""
@click="openNewImg(img.imageUrl || img.url)"
/>
</div>

js部分

changeActive(index){
console.log($('#'+index ));
$('#'+index ).find('.el-icon-delete').show();
},
removeActive(index){
$('#'+index ).find('.el-icon-delete').hide();
},

vue循环遍历给div添加id的更多相关文章

  1. Vue之循环遍历Json数据,填充Table表格

    简单记一次Vue循环遍历Json数据,然后填充到Table表格中,展示到前端的代码: async getData(id) { const res = await this.$store.api.new ...

  2. Layui之动态循环遍历出的富文本编辑器显示

    这篇记得是工作中的例子 描述: 平常的富文本显示都是根据静态的html获取id来显示,比如: <textarea class="layui-textarea" id=&quo ...

  3. vue组件,vue补充和总结,JS循环遍历和加减运算、类型转换补充

    目录 一.vue中的组件 1. 组件的概念 2. 组件分类 3. 组件的特点 4. 组件的定义 5. 组件化 (1)用法和注意 (2)数据组件化实例 6. 组件传参--父传子 (1)用法和注意 (2) ...

  4. vue教程2-05 v-for循环 重复数据无法添加问题 加track-by='索引'

    vue教程2-05 v-for循环 重复数据无法添加问题  加track-by='索引' 解决问题的代码示例: <!DOCTYPE html> <html lang="en ...

  5. Vue 循环为选中的li列表添加效果

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vu ...

  6. yii2通过foreach循环遍历在一个用户组中取出id去另一表里查寻信息并且带着信息合并原数组信息---案例

    yii2通过foreach循环遍历在一个用户组中取出id去另一表里查寻信息并且带着信息合并元数组信息---案例 public function actionRandomLists(){ //查询到了所 ...

  7. 关于js中循环遍历中顺序执行ajax的问题(vue)

    js里的循环,每次都是自顾自的走,它不等ajax执行好走完到success代码,就继续循环下一条数据了,这样数据就全乱了. 后来,想到试试ajax里async这个属性,async默认是true,即为异 ...

  8. vue不同序号的元素添加不同的样式

    vue不同序号的元素添加不同的样式 一.总结 一句话总结: 在vue中设计一个样式的数据数组来遍历即可 <script> new Vue({ el:'#review_exam_part', ...

  9. Django工程中使用echarts怎么循环遍历显示数据

    前言: 后面要开发测试管理平台,需要用到数据可视化,所以研究了一下 先看下最后的图吧,单击最上方的按钮可以控制柱状图显隐 views.py # -*- coding: utf-8 -*- from _ ...

随机推荐

  1. 玩转 sublime3 第一弹 文件介绍

    安装 官网下载地址:http://www.sublimetext.com/3 本文将以Windows 64 bit 进行讲解. 目录介绍 sublime默认安装之后会生成一个安装目录和数据目录: C: ...

  2. HTTP+XML接口客户端 结合策略模式实现总结

    在项目中,我们经常会使用到http+xml的接口,而且不仅仅的是一个,可能会有多个http的接口需要实时的交互.但是http接口的发送消息的公共部分是一样的,只有每个接口的报文解析和返回报文是不同的, ...

  3. J2EE概念汇总

    JVM 是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的.Java虚拟 ...

  4. hibernate---crateria

    Leslie 趁还没忘掉,赶快记录下来 Hibernate中Criteria的完整用法 转自:http://www.360doc.com/content/090313/10/26262_2794855 ...

  5. 关于使用css伪类实现小图标

    效果: .person_use>span{ display:block; width:0; height:0; border-width:10px; border-style:solid; bo ...

  6. 05 ADO.net

    ADO.NET就是一组类库 操作数据库用的.

  7. python dns 服务器

    import socketserver import struct import threading # DNS Query class SinDNSQuery: def __init__(self, ...

  8. 【Codeforces Round #499 (Div. 1) B】Rocket

    [链接] 我是链接,点我呀:) [题意] 让你猜到火星的距离x是多少. 已知1<=x<=m 然后你可以问系统最多60个问题 问题的形式以一个整数y表示 然后系统会回答你3种结果 -1 x& ...

  9. 讲一讲java异常及自定义异常

    1.异常,说白了.两种,一种就是就是不能让代码通过编译的异常.另一种就是程序运行期间出现的异常.异常就是错误,只要出现异常,程序就不会向下运行了.就不会执行后面的代码了.这时候就可以通过显示statc ...

  10. OC的动态继承编译机制

    [问]为什么OC不能sizeof一个对象的大小或一个类的大小?和类结构相近的结构体却能够. [再问]为什么OC不能将对象声明到静态空间,如栈中?和类结构相近的结构体却能够. [答]由于OC的动态继承编 ...