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. NGUI 按钮点击事件的两种绑定形式

    面板属性栏绑定 写一个脚本,定义一个Public的方法 Notify中选择物体时,选中自己 然后就可以选择通知到写的那个脚本的里边的public方法 代码绑定 创建一个代码文件,挂载到按钮对象上 代码 ...

  2. 亲历:IT 从业者避免猝死攻略 v1.0

    作者:香蕉痞 出处:http://www.geekpark.net/read/view/191188?u=0 亲历:IT 从业者避免猝死攻略 v1.0 By 香蕉痞 | 2013/10/28 [核心提 ...

  3. laravel contains 的用法

    最近在学laravel,做一下学习笔记. 1.contains()方法判断集合是否包含给定的项目: ]);var_dump($collection->contains('Desk'));// t ...

  4. windows server 2008开机自动登陆无密码,关机不必写原因

    运行secpol.sec接下来,在弹出的“本地安全策略”对话框中,依次展开左边树图到“本地策略”-“安全选项”,在右边可以找到“交互式登录 无须按 Ctrl+Alt+Del”,双击该项设置为“已启用” ...

  5. HDU 4318 Contest 2

    简单的一题,使用类DIJK的算法就可以了. #include <iostream> #include <cstdio> #include <queue> #incl ...

  6. [ReactVR] Render Custom 3D Objects Using the Model Component in React VR

    React VR isn't limited to simple 3D primitives. By using the <Model/> Component we can place a ...

  7. Tachyon在Spark中的作用(Tachyon: Reliable, Memory Speed Storage for Cluster Computing Frameworks 论文阅读翻译)

    摘要:         Tachyon是一种分布式文件系统,能够借助集群计算框架使得数据以内存的速度进行共享.当今的缓存技术优化了read过程,可是,write过程由于须要容错机制,就须要通过网络或者 ...

  8. Oracle 学习笔记 14 -- 集合操作和高级子查询

    Oracel提供了三种类型的集合操作:各自是并(UNION) .交(INTERSECT). 差(MINUS) UNION :将多个操作的结果合并到一个查询结果中,返回查询结果的并集,自己主动去掉反复的 ...

  9. ffmpeg在android上输出滑屏问题处理

    ffmpeg部分机器上有花屏的问题 原代码例如以下: while(av_read_frame(formatCtx, &packet)>=0 && !_stop & ...

  10. vuex3

    以下是一个表示“单向数据流”理念的极简示意: 但是,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏: 多个视图依赖于同一状态. 来自不同视图的行为需要变更同一状态. 这就是 Vue ...