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

最新推荐文章于 2023-07-10 21:46:09 发布
最新推荐文章于 2023-07-10 21:46:09 发布
阅读量1.6k 收藏 5
点赞数
分类专栏： vue 文章标签： 在vue里如何给v-for循环出来的元素设置不同的样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43486347/article/details/103139454
版权

在vue里如何给v-for循环出来的元素设置不同的样式在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
    <script src="./index.js"></script>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="app" style="width:500px; margin:0 auto">
        <el-button v-for="(buttonArr, index) in buttons" :class="arr[index]">{{buttonArr.primary}}</el-button>
    </div>
</body>
<script>
  var app = new Vue({
      el:"#app",
      data(){
          return{
           buttons:[{
              primary:'默认按钮'
           }, {
              primary:'默认按钮' 
           }, {
              primary:'默认按钮' 
           },{
              primary:'默认按钮' 
           }],
           arr: [
          "ss1",
          "ss2",
          "ss3",
          "ss4",
        ]
          }
      }
  })
</script>
</html>
抑制、
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue---v-for渲染和样式绑定
weixin_53027472的博客
09-25 813
Vue---v-for渲染和样式绑定
vue中v-for循环选中点击的元素并对该元素添加样式操作
11-20
但是往往所有v-for循环出的元素都会变化。如下面的代码：我需要点击到的元素添加一个类样式，其他元素不变，但是这样会导致所有的元素都会变化 html： ()'> <span>{{item.name}} css： .addclass{ color : red;...
vue---v-for为不同item设置不同的样式
maidu_xbd的博客
06-26 1682
要求：为每一条数据设置不同的样式，以背景颜色为例，希望每一个类别的背景颜色不一样。 关键： <template> <div> <ul> <li :class="'bgColor'+(index+1)" v-for="(item,index) in tagsList" :key="item.id">{{item.name}}</li> </ul> </div> </t
Vue for循环展示不同的css样式
RAGACM的博客
10-30 2539
<div v-for="(item,index) in listObj" :key="index"> <div style="height:60px;float:left" v-bind:class="{urgent:item.status==1,moderate:item.status==2,idle:item.status==3}"> </div> .urgent{ width:65%; float:left; border-left:2px solid
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.js之v-for循环中动态改变每个item的样式
热门推荐
玩大神的CSDN的博客
10-12 1万+
vue.js之v-for循环中动态改变每个item的样式 1.需求 支持单击选中，再次单击取消选中 当未选中任何条件按钮时则自动选择全部 点击A则选中第一行全部，点击C代表选中第二行全部 选择全部时（默认选择全部），自动取消其他选择 2.思路 定义数据的结构，将产品分类，A,C,elseProduct "全部"按钮，以及每个产品中应有是否选中的flag,以及点击事件 ...
Vue 实现v-for循环的时候更改 class的样式名称
10-15
在Vue.js中，当需要在`v-for`循环中为每个元素动态地更改CSS类时，我们可以利用`v-bind:class`指令。`v-bind:class`允许我们根据数据动态地绑定一个或多个类。这里我们将详细讲解如何实现这个功能，并提供一个实例来...
vue2.0使用v-for循环制作多级嵌套菜单栏
08-27
这里的`items`是你要遍历的数据源，`item`是当前遍历到的元素，而`:key`用于给每个元素设置唯一的标识，以帮助Vue优化更新性能。 在实现多级嵌套菜单栏的过程中，我们需要一个数据结构来存储各个级别的菜单项。以下...
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
10-18
这是一种在Vue中控制v-for循环次数的常见方法，可以有效地控制渲染的元素数量。 最后，文章总结了如何通过上述方法实现一行显示四个元素，并且对每一行的最右边元素进行特殊处理，即通过计算属性来控制其显示的样式...
vue-同一个循环下不同渲染样式的表示（两种方法）
LYly_B的博客
07-20 274
情景： 原代码： 　 <div class="cart-title">口味</div> <ul> <li class="sku-line selected">原味<i></i></li> <li class="sku-line">奶油<i&g...
Vue通过for循环随机生成不同的颜色或随机数的实例
10-16
今天小编就为大家分享一篇Vue通过for循环随机生成不同的颜色或随机数的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中列表渲染相关知识(v-for)
qq_44998582的博客
01-13 2095
v-for动态渲染列表，实现列表关键字搜索以及列表排序，key的作用
vue前端按钮显示隐藏_使用Vue中 v-for循环列表控制按钮隐藏显示功能
weixin_35826166的博客
12-23 2061
v-for可以把数据中的一个数组对应为一组元素v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。- 实现效果如图需求描述：第一个显示蓝色按钮，代表数据最终状态；其余按钮为灰色，显示数据流转记录。返回的数据类型前端页面代码{{listLZPar.operate_type | operatertype...
使用v-for循环如何给不同元素设置不同样式
weixin_43963309的博客
04-02 1715
<div v-for="(item, index) in space" :key="index" :class="'space-' + (index + 1)"></div> css: .space { &-1 { margin-left:0px; } &-2 { margin-left:52px; } &-3 ...
v-for遍历数组或者对象，渲染结构、v-bind动态设置class和style
派拉斯兔子的博客
07-10 5574
作用：可以遍历数组或者对象，用于渲染结构。 遍历数组语法： ⚫ v-for="item in 数组名" ⚫ v-for="(item, index) in 数组名“ 遍历对象语法：v-for = "(value , key) in 对象名" 遍历数字语法：v-for = "item in 数字" key值：①、不写：默认按照下标给虚拟dom打标识。 ②、index：按照下标给虚拟dom打标识index！就地复用dom节点效率会低。 ③、id：按照下标给虚拟dom打标识id！就地复用dom节点效率会
vue怎样给v-for循环出来的元素动态设置不同的样式
南北极之间
10-18 3174
用：class即可 使用遍历时的索引值。动态生成不同的class比如class1，class2以此类推 代码： <div class="common-title-part-cont part-cont-rt-box"> <el-row v-if="typeImg.length>0" :gutter="10"> <el-col v-for="(item,index) in typeImg"
用vue 的 v-for 实现按钮选中改变样式，且获取对应值
weixin_34054931的博客
06-12 1047
<div class="vip-buy"> <div v-for="(item,index) in vipSet" :key="item.payprice" class="vip-buy-item" :class="{'select-item':index == clickIndex}" // 判断当前点击标签 ...
VUE中如何给v-for循环出来的元素设置不同的样式
HelloWord176的博客
10-14 3793
效果图： 1. 我们可以给要循环的盒子动态绑定class名 并且传入一个数组 <div class="AllPeople" v-for="(item , index) in rankingData" :key="index" :class="sstt[index]"> <div class="inner"> <span class="innerContent">TOP1告警区域 {{item.area}}<.
vue v-for 样式赋值
Wisdom—Yoga—TaciturnKnight（WYT）
12-07 3749
v-bind:style="{'background-color': item.iconColor}"> {{item.name}} v-bind:style="{'background-color': item.iconColor}"> {{item.
vue中v-for循环添加图标
最新发布
09-06
在Vue中，可以使用v-for指令将数据循环渲染为多个图标。 首先，我们需要准备一个包含图标名称的数组，例如： ``` data() { return { icons: ['icon1', 'icon2', 'icon3'] } } ``` 然后，在模板中使用v-for指令将数组中的图标名称循环渲染为图标元素： ``` <template> <div> <div v-for="icon in icons" :key="icon"> <i :class="icon"></i> </div> </div> </template> ``` 在上面的代码中，我们通过v-for指令将icons数组中的每个元素保存在变量icon中。然后，我们使用:key指令为每个图标元素提供唯一的key值，以帮助Vue进行元素的追踪和更新。 接下来，我们使用:class指令动态绑定icon变量作为图标元素的class名称。这样，每个图标元素都会根据对应的图标名称添加相应的样式。 通过以上步骤，我们就可以在Vue中使用v-for指令循环渲染图标了。根据icons数组中的元素个数，会渲染出相应数量的图标元素。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值