vue循环遍历给div添加id
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的更多相关文章
- Vue之循环遍历Json数据,填充Table表格
简单记一次Vue循环遍历Json数据,然后填充到Table表格中,展示到前端的代码: async getData(id) { const res = await this.$store.api.new ...
- Layui之动态循环遍历出的富文本编辑器显示
这篇记得是工作中的例子 描述: 平常的富文本显示都是根据静态的html获取id来显示,比如: <textarea class="layui-textarea" id=&quo ...
- vue组件,vue补充和总结,JS循环遍历和加减运算、类型转换补充
目录 一.vue中的组件 1. 组件的概念 2. 组件分类 3. 组件的特点 4. 组件的定义 5. 组件化 (1)用法和注意 (2)数据组件化实例 6. 组件传参--父传子 (1)用法和注意 (2) ...
- vue教程2-05 v-for循环 重复数据无法添加问题 加track-by='索引'
vue教程2-05 v-for循环 重复数据无法添加问题 加track-by='索引' 解决问题的代码示例: <!DOCTYPE html> <html lang="en ...
- Vue 循环为选中的li列表添加效果
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vu ...
- yii2通过foreach循环遍历在一个用户组中取出id去另一表里查寻信息并且带着信息合并原数组信息---案例
yii2通过foreach循环遍历在一个用户组中取出id去另一表里查寻信息并且带着信息合并元数组信息---案例 public function actionRandomLists(){ //查询到了所 ...
- 关于js中循环遍历中顺序执行ajax的问题(vue)
js里的循环,每次都是自顾自的走,它不等ajax执行好走完到success代码,就继续循环下一条数据了,这样数据就全乱了. 后来,想到试试ajax里async这个属性,async默认是true,即为异 ...
- vue不同序号的元素添加不同的样式
vue不同序号的元素添加不同的样式 一.总结 一句话总结: 在vue中设计一个样式的数据数组来遍历即可 <script> new Vue({ el:'#review_exam_part', ...
- Django工程中使用echarts怎么循环遍历显示数据
前言: 后面要开发测试管理平台,需要用到数据可视化,所以研究了一下 先看下最后的图吧,单击最上方的按钮可以控制柱状图显隐 views.py # -*- coding: utf-8 -*- from _ ...
随机推荐
- TESTUSERB 仅能对TESTUSERA 用户下的某些表增删改查、有些表仅能对某些列update,查询TESTUSERB 用户权限,获取批量赋予语句。
TESTUSERB 仅能对TESTUSERA 用户下的某些表增删改查.有些表仅能对某些列update,查询TESTUSERB 用户权限,获取批量赋予语句. select 'grant '|| PRIV ...
- Aspose.Cells基础使用方法整理
Aspose.Cells 插件,将web端数据以excel形式导出到客户端. 相关文档: https://blog.csdn.net/djk8888/article/details/53065416 ...
- 第四章 Python之文件处理
文件操作 文件操作一般分为三步:打开文件得到文件句柄并赋值给一个变量--->通过句柄对文件进行操作-->关闭文件 f=open(r'C:\Users\hesha\PycharmProjec ...
- CF992E Nastya and King-Shamans_线段树
Code: #include<cstdio> #include<algorithm> using namespace std; const int maxn = 200000 ...
- jq——DOM文档处理
内部插入:父子级关系 1 $(a).append($(b))把b插入到a里面(a里面的面后) $("div").append($("<p>段落</p&g ...
- python--csv文件读写
最近刚注册了kaggle账号,练习了下简单的knn算法用于手写数字识别.下载的训练和测试文本都是使用csv文件存储的,所以在此重拾下csv模块. csv文件 csv全称(Comma-Separated ...
- d3代码如何改造成update结构(恰当处理enter和exit)
d3的enter和exit 网上有很多blog讲解.说的还凑合的见:https://blog.csdn.net/nicolecc/article/details/50786661 如何把自己的rude ...
- Label,PushButton,ToolButton 实现动态图片按钮,Label显示gif动画
.h文件 public: explicit event(QWidget *parent = 0); ~event(); QImage image; QLabel *label; QLabel *lab ...
- windows编程ASCII问题
在CMD中输入CHCP可查看当前使用代码 输入CHCP 65001为UTF-8
- 如何使用JAVA请求HTTPS
JDK对应的TLS版本(仅供参考) 1.写一个SSLClient类,继承至HttpClient import java.security.cert.CertificateException; impo ...