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. RabbitMQ基础学习笔记(C#代码示例)

    一.定义: MQ是MessageQueue,消息队列的简称(是流行的开源消息队列系统,利用erlang语言开发).MQ是一种应用程序对应用程序的通信方法.应用程序通过读写入队和出队的消息来通信,无需专 ...

  2. 移动互联网iOS工程师必须知道的三点

    如果十年磨一剑,那么现在起作为一名iOS工程师,以下三点你必须要知道: 1.现在开始学swift正是时候,永远不要怕晚 因为…新时代的程序语言Swift有很多优势,长江后浪推前浪,Swift上手快,开 ...

  3. day01 编程概述及计算机组成原理

    目录 编程概述 计算机硬件的五大组成部分 Central Processing Unit(cpu中央处理器) 存储器 输入,输出设备 打开QQ的流程 计算机五大组成部分补充 多核CPU ×64/x86 ...

  4. 博客模板更新CSS

    采用了作者#a的模板BlueSky进行了些许修改 在原有基础上加了三个样式,使页面显示风格统一些 #home{ background-color:#fff; } #main{ background-c ...

  5. BZOJ 2244 [SDOI2011]拦截导弹 (三维偏序CDQ+线段树)

    题目大意: 洛谷传送门 不愧为SDOI的duliu题 第一问?二元组的最长不上升子序列长度?裸的三维偏序问题,直接上$CDQ$ 由于是不上升,需要查询某一范围的最大值,并不是前缀最大值,建议用线段树实 ...

  6. BZOJ 3676 [Apio2014]回文串 (后缀自动机+manacher/回文自动机)

    题目大意: 给你一个字符串,求其中回文子串的长度*出现次数的最大值 明明是PAM裸题我干嘛要用SAM做 回文子串有一个神奇的性质,一个字符串本质不同的回文子串个数是$O(n)$级别的 用$manach ...

  7. struts2解决动态多文件上传的问题(上传文件与数据库字段一一对应)(转)

    struts2多文件上传我想只要会用struts2的朋友都不会陌生,但是怎么在action中根据用户上传的文 件把文件路径写到数据库中对应的字段上呢?ps:我的意思是这样,页面上有固定的5个上传文件的 ...

  8. Nginx监控

    http://www.ttlsa.com/nginx/nginx-status-detail/ http://blog.csdn.net/bobpen/article/details/53431699 ...

  9. Linux进程的内存布局

    这张图很好,注意其中最上面是高位地址,虽然很多个0,但是c开头的,不要看反了: 更具体的可以看这里: A.正文段.这是由cpu执行的机器指令部分.通常,正文段是可共享的,所以即使是经常执行的程序(如文 ...

  10. HDU 4339 Contest 4

    树状数组,主要是抓住要求连续1的个数.这样,初始时,相同的加1,不同的加0. 查询时,用二分搜索右边界.就是比较当前mid-l+1的值与他们之间1的个数(这可以通过树状数组求区间和得出),记录右边界即 ...