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. iOS11访问相册权限变更问题

    手机升到iOS 11后  发现之前正常的图片保存功能无法正常使用  会闪退 经测试发现应该是权限没有开启的原因  但是NSPhotoLibraryUsageDescription已经写入plist   ...

  2. 脚本_求和100以内的正整数.sh

    #!bin/bash#功能:求和100以内的正整数#作者:liusingbon#seq 100 可以快速自动生成 100 个整数sum=0for i in $(seq 100)do    sum=$[ ...

  3. day16 闭包以及装饰器(好东西)

    目录 闭包 装饰器 最基础的装饰器 完善装饰器 有返回值的 有参数的 装饰器模版 语法糖 登录装饰器 可变类型的局部变量可以修改全局变量 三层装饰器 闭包 首先要理解函数对象的概念,其实函数名就相当于 ...

  4. Codeforces Round #470 (rated, Div. 2, based on VK Cup 2018 Round 1)A. Protect Sheep

    http://codeforces.com/contest/948/problem/A   A. Protect Sheep Bob is a farmer. He has a large pastu ...

  5. CRM系统 - 总结 (二) stark组件

    介绍: stark组件,是一个帮助开发者快速实现数据库表的增删改查+的组件.目标: 10s 中完成一张表的增删改查. 前戏: django项目启动时,自定义执行某个py文件. django启动时,且在 ...

  6. JAVA深克隆与浅克隆1

    复制就是得到一个副本 克隆就是复制一个对象的复本.但一个对象中可能有基本数据类型,如:int,long,float    等,也同时含有非基本数据类型如(数组,集合等)被克隆得到的对象基本类型的值修改 ...

  7. 字符拆分存入Map计算单词的个数

    ///计算从命令行输入单词的种类与个数//Map<key,Value>Key-->单词:Value-->数量

  8. WinServer-IIS初始安装及发布网站

    \aspnet_regiis.exe –i 还有非常重要的一步就是给发布文件夹设置权限,到底设置那一个用户的权限我也没有弄清楚,大概是IIS_IUSERS或者IUSR用户就可以了,我设置完了之后没有反 ...

  9. 洛谷 P2932 [USACO09JAN]地震造成的破坏Earthquake Damage

    P2932 [USACO09JAN]地震造成的破坏Earthquake Damage 题目描述 Wisconsin has had an earthquake that has struck Farm ...

  10. POJ 3744

    矩阵快速乘求概率,不难.但有注意的一点是,一定要注意地雷连着的情况,一旦出现两个雷相邻,就必定为0了. #include <iostream> #include <algorithm ...