Vue通过for循环随机生成不同的颜色或随机数

关注

原创最新推荐文章于 2026-05-05 09:22:10 发布 1.5w 阅读 AI 写同款· GEO 优化 ›

STM32CubeMX定时器进阶玩法：用编码器模式实现电机转速测量（附避坑清单）本文详细介绍了如何使用STM32CubeMX配置定时器的编码器模式实现电机转速测量，包括硬件连接、CubeMX配置关键步骤、转速计算算法及常见问题解决方案。特别针对工业控制和机器人开发中的高精度需求，提供了实用的避坑清单和优化技巧，帮助开发者高效完成项目。阅读详情

需求：随机生成不同的如下图标的背景颜色

方法：本来通过计算属性渲染出随机颜色，然而计算属性是一次性获取值，即使你把RandomColor引入v-for中也没有用，得到的只会永远是同一颜色，除非刷新页面颜色才改变，但是还是没法实现五颜六色的功能，因此，换了中思路，直接在v-for循环中加入随机生成颜色代码，即可快速得到不同颜色的方块。

		computed: {
			RandomColor(index) {
				let r, g, b;
				r = Math.floor(Math.random() * 256);
				g = Math.floor(Math.random() * 256);
				b = Math.floor(Math.random() * 256);
				return "rgb(" +r + ',' +g+ ',' +b+ ")";
			}
		},

最终代码如下：(此处通过canview判断一下用户是否可以看到方块，：style=""里面通过三目运算符进行判断后台是否有返回颜色值，没有则用随机颜色填充，有则填充入#ccc默认颜色)


<div :style="{backgroundColor:val.can=='1'?(val.iconcolor==''||val.iconcolor==null?'rgb('+Math.floor(Math.random() * 256)+','+Math.floor(Math.random() * 256)+','+Math.floor(Math.random() * 256)+')':val.iconcolor):'#ccc'}" v-for="(val,index) in item" @click="handleMemberClick(val,index,$event)">
</div>

收录于