vue遍历固定几种颜色，随机颜色

最新推荐文章于 2024-03-04 18:43:06 发布

33455432

最新推荐文章于 2024-03-04 18:43:06 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/weixin_38999134/article/details/112008480

版权

遍历固定颜色

 <el-col :span="8"  v-for="(item,index) in dataList" :key="item.id" class="mb-10 fristSide">
        <div class="pore">
            <div class="top_box " :class="top[index]">
            <!-- 随机  <div class="top_box "  :style="randomRgb(item)"> -->
                <span>{{item.nameCh}}</span>
                <span class="fr">
                <span class="bigtitle">{{item.stockNumber}}</span>
                <span>{{item.unit}}</span>
                </span>
            </div>
        </div>
</el-col>

  top:[
                "top1",
                "top2",
                "top3",
                "top4",
                "top5",
                "top6",
            ],

 .top_box{
   color:#fff;
   padding: 18px 10px;
   border-radius: 5px;
 }
 .top1{
   background: #f2c311;
 }
 .top2{
   background: #1cbb9b;
 }
 .top3{
   background:rgb(229, 89, 226);
 }
 .top4{
   background:rgb(177, 153, 120);
 }
 .top5{
   background:rgb(144, 90, 150);
 }
 .top6{
   background: rgb(157, 176, 182);
 }

随机颜色

  //   循环遍历不同背景色
randomRgb(item) {
    let R = Math.floor(Math.random() * 130+110);
    let G = Math.floor(Math.random() * 130+70);
    let B = Math.floor(Math.random() * 130+110);
    return {
        background: 'rgb(' + R + ',' + G + ',' + B + ')'
    };
},