vue 从后台v-for获取到的数组怎么给每一项设置不同的背景色

已于 2022-05-29 15:39:52 修改
阅读量2.3k 收藏 17
点赞数 5
分类专栏： vue 文章标签： css3 前端 css
于 2022-05-16 21:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60699903/article/details/124795837
版权

在开发中，经常会遇到拿到的数据是v-for得到的，如何给动态数组的每一项添加不同的背景色呢，单纯的三元运算符只能设置两种颜色，如果想要4种、6种...颜色，怎么办呢

【需求样式】举例：比如我们常玩的爸爸农场里面的领饲料任务

【解决代码】

【1】data中定义颜色colorList

data(){
    return{
        colorList:['#24AE5C', '#109EE8','#895DE6','#E46267','#E69030','#66C8BC']
    }
}

【2】 找到设置数组每一项的地方，动态绑定style，有n种颜色，就取余数的方法

<div v-for="item in List" :key="index" :style="{background:colorList[index%6]}"></div>

锡勋
关注
  • 5
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【vue】v-for给循环出来的div设置不同的背景色
@point
11-03 6075
第一步：给要循环的盒子动态绑定class名 并且传入一个数组 <div v-for="(i,a) in serve" class="sever_box2"> <div :class="sstt[a]"> 吧啦吧啦 </div> </div> 第二步：在data中定义这个数组 data() { return { sstt: [ "ss1"
Vue通过for循环随机生成不同的颜色或随机数的实例
01-21
需求：随机生成不同的如下图标的背景颜色 方法：本来通过计算属性渲染出随机颜色，然而计算属性是一次性获取值，即使你把RandomColor引入v-for中也没有用，得到的只会永远是同一颜色，除非刷新页面颜色才改变，但是还是没法实现五颜六色的功能，因此，换了中思路，直接在v-for循环中加入随机生成颜色代码，即可快速得到不同颜色的方块。 computed: { RandomColor(index) { let r, g, b; r = Math.floor(Math.random() * 256); g = Math.floor(Math.random() * 256);
v-for遍历数组或者对象，渲染结构、v-bind动态设置class和style
派拉斯兔子的博客
07-10 5415
作用：可以遍历数组或者对象，用于渲染结构。 遍历数组语法： ⚫ 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节点效率会
从后端接口拿过来的多个值，根据值得不同，定义不同的字体颜色或者背景颜色。 即定义不同样式；
weixin_56898375的博客
05-11 1082
从后端接口拿过来的多个值，根据值得不同，定义不同的字体颜色或者背景颜色。 即定义不同样式；
vue v-for循环出来的数组加不同的颜色(颜色循环)
miem_yang的博客
10-13 7179
上面方块是由后端返回的数组 需求是每四个方块循环不同的背景颜色 下面展示一些 内联代码片。 // 具体v-for的代码块 <div v-for="(item, index) in appList" :key="index"> <span :style="{'background':item.color}"></span> // 方块 样式就不写了 <span>{{系统名称}}</span> </div> // appLi.
vue v-for遍历数组 点击改变背景色简单操作 新手笔记
Donkeyfly1的博客
08-22 1403
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
vue基础之data存储数据及v-for循环用法示例
12-11
注意，`v-for` 指令要求在每个迭代元素周围有一个唯一的根元素，比如 `<ul>` 和 `<li>`。 在实际应用中，`v-for` 往往配合 `v-if` 或 `v-bind`（简写 `:`）等其他指令一起使用，以实现更复杂的逻辑。此外，`v-for` ...
Vue如何循环提取对象数组中的值
01-21
1.数据如下，提取name和callcount 2代码. getQueryCallStatistics(sesp1, this.provinceId).then((res) => { let arr = []; let arr1 = []; let arr2 = [];... this.xunshiMap = res.data.callstatistics;...
vue与vue-i18n结合实现后台数据的多语言切换方法
08-27
vue与vue-i18n结合实现后台数据的多语言切换方法 本文将详细介绍如何使用vue和vue-i18n实现后台数据的多语言切换方法。通过结合使用vue和vue-i18n，我们可以实现后台数据的多语言切换，从而满足不同语言地区的需求...
基于VUE的v-charts的曲线显示功能
10-16
在`rows`数组中，每一项都是一个对象，包含对应的日期和各个电表的电能值。 V-charts的这种易用性使得开发者能够快速地创建出美观且实用的数据可视化图表，而无需深入理解Echarts复杂的配置选项。通过这种方式，...
vue使用ajax获取后台数据进行显示的示例
10-18
每行表格的数据由 `list` 数组中的每一项构成，通过 `v-bind` (`v-`) 指令将后台返回的数据绑定到相应的表格单元格。 总结来说，这个示例展示了如何利用 Vue.js 和 AJAX（通过 vue-resource 插件）从后台获取数据，...
Vue项目如何配置、切换主题颜色（mixin + scss方式，简单高效）
h395910638的博客
02-28 9027
Vue项目主题切换，简单高效，一天搞定三个主题！
VUE之更换背景颜色
最新发布
hulinhulin的专栏
09-22 4684
Vue实现背景更换颜色操作
根据表格数据的内容来改变 Element UI 表格中的背景颜色
w199809w的博客
07-04 1199
通过以上设置，每个单元格的背景颜色将根据其内容动态变化。你可以根据实际需求修改样式函数中的逻辑和颜色设置。接下来，你需要在 Vue 实例中定义对应的样式函数，根据单元格的内容返回不同的样式对象。要根据表格数据的内容来改变 Element UI 表格中的背景颜色，你可以使用。属性，该属性接收一个函数，用于根据单元格的内容返回对应的样式对象。然后，在表格的列定义中，你可以添加。首先，你需要在表格的列定义中添加。属性和样式函数来实现。
vue动态修改控件颜色值
scimence的专栏
04-28 1550
2、在computed方法体中添加自定义函数，绑定变量，随变量值的变动，返回不同的颜色值。3、自定义变量 （当自定义变量变动时，自动变动颜色值）1、绑定控件颜色值到指定的computed函数。
ant-design-vue table中columns根据某一元素设置颜色属性
pleaseprintf的博客
03-24 5116
ant-design-vue table中columns根据某一元素设置颜色属性
Vue的v-for和v-bind实现列表颜色切换
mermir的博客
01-13 1867
需求： 在页面上显示四个列表，初始时字体为黑色。 鼠标点击某一个列表时，该列表的颜色变为红色，其余列表仍为黑色。 代码实现： <!-- css --> <style> .red{ color: red; } </style> <!-- html --> <div id="app"> <ul> ...
vue变更v-for列表多个项目的颜色和选择项目
xc9711的博客
05-18 972
前言 变更v-for遍历的列表的颜色看似简单，但是细细思考，你会发现一个问题，让列表中的某一个进行变换是很简单的，但是如何对根据自己选择的多个进行变更颜色呢？为了实现这个目的，你得确定选择的是哪一项，如果选择多个，应该有哪些下标的列表是需要变色的等等需要考虑的因素。 本文章主要以实现变更颜色为主，也有涉及一些选择选中的项目代码 实现单个列表进行变色 单个的变色很简单 // 颜色样式 <style> .red{ color: red; } </style> <!-- ht
vue——如何给v-for循环出来的元素设置不同的样式
weixin_50501118的博客
05-15 2750
例如给循环出来的四个盒子设置不同的背景色 第一步：给要循环的盒子动态绑定class名 并且传入一个数组 <div v-for="(i,a) in serve" class="sever_box2"> <div :class="sstt[a]"> <img :src="i.imgs" alt=""/> <router-link :to="i.url"&g....
使用Vue的v-for指令遍历数组，通过v-model指令将每一项数据绑定到表单元素上，实现数据的编辑。同时，在每一项数据的旁边添加一个删除按钮，通过点击按钮触发事件，从数组中删除该数据。最后，您可以通过触发提交按钮的事件，将修改后的数组提交给后台更新数据。
04-24
2. 使用v-model指令将每一项数据绑定到表单元素上，实现数据的编辑； 3. 在每一项数据的旁边添加一个删除按钮，通过点击按钮触发事件，从数组中删除该数据； 4. 通过触发提交按钮的事件，将修改后的数组提交给后台...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值