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. CorelDRAW X6+PhotoZoom这组合,无敌了啊!

    520就这样毫无察觉的过去了,对于额这种单身狗,额表示,什么520,什么情人节,统统略过,,可是,可是,即便这样,还是硬生生的吃了一把来势凶猛的远在天际的狗粮,当我看到CorelDRAW X6和Pho ...

  2. gbk编码

    GBK 编码   GBK编码范围:8140-FEFE,汉字编码范围见第二节:码位分配及顺序. GBK编码,是对GB2312编码的扩展,因此完全兼容GB2312-80标准.GBK编码依然采用双字节编码方 ...

  3. vue 移动端项目,动态控制div距离底部的距离

    <template> <div class="details"> <com-nav-bar title="保险详情"> &l ...

  4. Spring配置文件中指定init-method属性的作用

    bean 配置文件属性 init-method 用于在bean初始化时指定执行方法,用来替代继承 InitializingBean接口.相关链接:https://www.cnblogs.com/Joe ...

  5. poi API大全

    一. POI简介 Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程序对Microsoft Office格式档案读和写的功能. 二. HSSF概况 HSSF 是 ...

  6. 【codeforces 810A】Straight «A»

    [题目链接]:http://codeforces.com/contest/810/problem/A [题意] 有n门课的成绩,和一个整数k代表每门课的满分都是k分; 然后这n门课的成绩是按照平均分算 ...

  7. table的创建

    results为table的行信息 columnNames  是table列名 //创建并初始化table: table =new JTable(results,columNames); //设置ta ...

  8. jsoup抓取网页+具体解说

    jsoup抓取网页+具体解说 Java 程序在解析 HTML 文档时,相信大家都接触过 htmlparser 这个开源项目.我以前在 IBM DW 上发表过两篇关于 htmlparser 的文章.各自 ...

  9. Markdown简单介绍和基本的语法

    原文发表自我的个人站点 http://www.hainter.com/markdown.欢迎大家訪问,谢谢支持~ Markdown是一种语言,能够用于编写高质量的文章,语法简单易用 Markdown的 ...

  10. poj 2777 Count Color(线段树、状态压缩、位运算)

    Count Color Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 38921   Accepted: 11696 Des ...