vue 给v-for循环出来的元素设置不同样式 (通过样式隐藏v-for循环的第一个元素)

最新推荐文章于 2023-09-04 14:17:29 发布
最新推荐文章于 2023-09-04 14:17:29 发布
阅读量912 收藏
点赞数
文章标签： 前端 vue.js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q249859693/article/details/124736092
版权

vue 给v-for循环出来的元素设置不同样式

html代码

<div style="display: flex;align-items:center;color:#2351F3" v-for="(item,index) in List" :key="index">
	<i :class="'listIcon'+(index+1)" style=" font-size: 20px;" class="el-icon-right"></i>
    <el-button disabled>{{item.name}} {{item.id}}</el-button>
</div>

css代码

.listIcon1{display:none}
q249859693
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 实现v-for循环的时候更改 class的样式名称
10-15
主要介绍了Vue 实现v-for循环的时候更改 class的样式名称，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 里面通过v-for循环出来多个相同样式的div,根据index值给每个div添加不同的id名
热门推荐
guoyiq的博客
02-22 4万+
这是循环出来的多个div循环的数组加上这个方法就可以为每个div添加一个id 为 person_1,person_2 ,person_3................
vue中使用v-for循环出来的数据,如何单独控制显示隐藏
weixin_45453560的博客
07-29 6404
vue中使用v-for循环出来的数据,如何单独控制显示隐藏
vue——如何给v-for循环出来的元素设置不同的样式
weixin_44613294的博客
01-23 1万+
例如给循环出来的四个盒子设置不同的背景色 第一步：给要循环的盒子动态绑定class名 并且传入一个数组 &amp;lt;div v-for=&quot;(i,a) in serve&quot; class=&quot;sever_box2&quot;&amp;gt; &amp;lt;div :class=&quot;sstt[a]&quot;&amp;gt; &a
Vue 列表渲染（v-for）——Vue 学习笔记（七）
ySFRaabbcc的博客
11-13 776
v-for 基本语法 我们可以用 v-for 指令基于一个数组来渲染一个列表，v-for 指令需要使用 item in items（item of items 也可以）形式的语法，其中 items 是源数据数组，而 item 是被迭代的数组元素的别名： 结果： 在 v-for 块中，我们可以访问所有父作用域的 property，v-for 还支持一个可选的第二参数，即当前项的索引： 结果： v-for 也可以遍历对象： ...
VUE-33 循环不同样式
m0_59214979的博客
01-06 1186
本节：循环内容没问题，那么怎么循环内容里，不同的样式？ 1.循环输出数据。重点：定义冒号，属性变成变量，可以循环不同的内容 2.循环的数据 3.定义变量的样式 完整代码： <template> <div class="container"> <div class="out"> <!-- 保证不换行 --> <div> <div class="top"&gt..
vue循环样式切换
weixin_53944118的博客
01-12 568
vue循环渲染的样式切换（单选，多选） 单选 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"> <title>vue循环渲染样式切换</title&
05-vue-条件循环渲染样式
m0_57103348的博客
08-30 328
1.使用的变量为true就显示,false就隐藏。2.在业务中常常可以通过操作if或者show使用的变量,来达到操作元素显示和隐藏的效果。3.v-if的做法是删除节点,v-show做法是操作css的display:none。2.在vue2.0中,v-if和v-for写在一起时候会出现的问题(面试)v-if具有较高的 切换消耗,常常用在用户不常切换的模块。v-show具有较高的性能消耗,常常用在频繁切换的模块中。切换模块，它的属性值等会占用内存，更高的内存消耗。根据它们底层的设计不一样有各自的使用场景。...
vue v-for循环中如何给部分元素添加事件和样式
Zed_GM的博客
08-06 4129
统一添加样式很简单，下面看下给单独某个循环出来的元素添加事件和样式。 <template> <div id="bbottom" class=""> <div class="bottom"> <div class="title"> <el-breadcrumb separator-class="el-ico...
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
10-18
主要介绍了关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性),需要的朋友可以参考下
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
12-29
数据结构为数组中包含对象–树形结构，用Vue组件的写法实现以下的效果： 树形列表，缩进显示层级，... <table v-for=item v-bind:list=item> 组件模板代码 <script type=text/x-template id=table-component-tem
vue.js视频教程及源码（一）
最新发布
10-19
第七节：vue循环语句v-for 第八节：vue计算属性 第九节：vue监视属性 第十节：vue样式属性Class与Style绑定 第十一节：vue事件处理器 第十二节：vue表单处理 第十三节：vue生命周期 第十四节：vue-cli脚手架安装 第...
vue.js学习相关文件-测试代码
06-05
bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。 update: 被...
vue项目实现设置根据路由高亮对应的菜单项操作
11-19
高亮显示菜单是很常见的一个场景 首先，在router-link标签上绑定对应的路径 然后在css里面设置router-link-active类的样式即可切换路径的时候高亮对应的菜单 也可以在router路由数组里面设置meta信息，然后根据这...
如何给Vue v-for循环渲染出的元素（导航栏） 批量添加点击事件 及 点击后添加css类样式 及 点击后路由跳转切换
m0_46470372的博客
03-17 7086
如何给Vue v-for循环渲染出的元素 批量添加点击事件 及 点击后添加css类样式 及 点击后路由跳转切换 能够实现或解决的问题 给Vue v-for循环出的元素批量添加点击事件，并以自己在数组中的下标为参数 给Vue v-for循环出的元素批量添加点击后激活的css类（三元运算符方式），且在点击其他同列元素的时候自动取消该类 给Vue v-for循环出的元素添加 切换路由 的事件 正文 ...
使用Vue中 v-for循环列表，控制按钮隐藏显示
莫不静好
08-30 2万+
v-for可以把数据中的一个数组对应为一组元素 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。 - 实现效果如图 需求描述： 第一个显示蓝色按钮，代表数据最终状态；其余按钮为灰色，显示数据流转记录。 返回的数据类型 前端页面代码 &lt;div class="leftProcessBox...
vue中数组常用的六种循环方法
A1123352950的博客
09-04 7824
简单记录一下，常用的六种数组循环的方法，分别是for()，map()，forEach()，filter ()，every()，some()
Vue中的v-for循环，实现div块的循环生成
qq_58372242的博客
03-09 1万+
前言 大家好,这里是果力成,老规矩,学之!最近在做前端页面遇到一个小问题，说来也不难，但还是花费了我的好些时间，保持习惯记录一下。在前端学习中不免遇到一个div或者一个数组的循环产生，因为挨个儿传数据显然不是最优的。这里讲述的是Vue中的 v-for循环，生成的是div块。 HTML v-for，可以循环普通的数组，数字，对象。这些在其他优秀博主那里会得到非常详细的介绍，参考如下： http://t.csdn.cn/aBwsD 我就不做赘述啦。 简单说明一下，当前的页面只有一个div块级元素，需求是
v-for循环默认显示第一项
07-27
回答: 要实现v-for循环默认显示第一项，可以在data中设置一个active变量，并将其初始值设为0，表示默认选中第一项。然后在循环的标签中使用:class属性来判断当前项是否为选中项，如果是则添加activeClass类名，否则...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值