首页 > 其他分享 >vue通过 v-for循环出来的数组给元素 加不同的颜色

vue通过 v-for循环出来的数组给元素 加不同的颜色

时间:2023-09-21 15:16:20浏览次数:36  
标签:vue 元素 rgb 循环 数组 255

直接上代码:

1 <div v-for="(item,i) in colorList" :key="i">
2    <div class="cmn-color">
3        <div :style="{'background':item}"></div><span>开发{{i+1 }}</span> 
4    </div>
5 </div>
const colorList = ref(['rgb(102, 152, 255)','rgb(57, 215, 144)',"rgb(160, 161, 254)","rgb(248, 136, 121)","rgb(103, 244, 228)","rgb(65, 223, 255)"])

效果如下

 

标签:vue,元素,rgb,循环,数组,255
From: https://www.cnblogs.com/xuwupiaomiao/p/17719972.html

相关文章

  • wpf 覆盖元素在webview2之上
    元素代码来源githubCrissCross项目需要两个工具类及一个webview2的封装类//Copyright(c)ChrisPulman.Allrightsreserved.//LicensedundertheMITlicense.SeeLICENSEfileintheprojectrootforfulllicenseinformation.usingSystem;usingSystem.Runt......
  • CentOS环境 nginx配置vue项目
    ps:这里使用ruoyi-vue-plus项目举例,官网:https://plus-doc.dromara.org/一、配置不带应用路径的vue项目1、打包。首先将vue项目生产配置文件的的应用访问路径设为'/',然后命令行输入runrunbuild:prod进行打包。2、导入环境。将打包文件(dist)拖入CentOS中/usr/local/nginx/html......
  • 二维数组
    for(inti=0;i<array.GetLength(0);i++){for(intj=0;j<array.array.GetLength(1);j++){Console.WriteLine(array[i,j]);}//0,00,10,2//1,01,11,2}基本概念1.二维数组是使用两个下标(索引)来确定元素的数组两个下标可以理解为行标和列......
  • 稀疏数组
    稀疏数组稀疏数组介绍当一个数组中大部分元素为0,或为同一值的数组时,可以使用稀疏数组来保存该数组。稀疏数组的处理方式是:记录数组一共有几行几列,有多少个不同值把具有不同值的元素和行列及值记录在一个小规模的数组中,从而缩小程序的规模publicclassarrayDemo9{publ......
  • nodejs+vue+element-ui安装
    1.nodejs安装https://www.runoob.com/nodejs/nodejs-install-setup.html2.vue安装nodejs安装以后,使用vue会报错:‘vue‘不是内部或外部命令,也不是可运行的程序解决办法:https://developer.aliyun.com/article/1093401配置vue的环境变量:查看到prefix的值以后,分别......
  • 【js】数组的几个常用方法
    filter、map、forEachfilterfilter()方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。注意:filter()不会对空数组进行检测。注意:filter()不会改变原始数组。语法:array.filter(function(currentValue,index,arr),thisValue)参数说明......
  • 数组变异方法和非变异方法的总结
    区别:1.操作数组的方法中,分为变异方法和非变异方法。2.其中,变异方法意味着会改变原数组,而非变异方法则只会返回一个新数组,不会修改原始数组数组变异方法:push()//数组尾部追加一个元素pop()//数组尾部弹出一个元素shift()//数组头部弹出一个元素unshift()//数组头部插入一个......
  • 若依 vue问题
    1.table列对布尔的处理<el-table-columnlabel="是否可见"align="center"prop="activityVisible":formatter="formatActivityVisible"/>formatActivityVisible:function(row,index){letres=''if(r......
  • vue+openlayers绘制线
    绘制线1<template>2<div></div>3</template>4<script>5importVectorLayerfrom'ol/layer/Vector.js';6importVectorSourcefrom'ol/source/Vector.js';7importFeaturefrom'ol/Feature&......
  • 解析vue项目,scoped,ref属性,混入mixin,插件,Elementui
    0解析一下vue项目......