Vue通过for循环随机生成不同的颜色或随机数的实例
需求：随机生成不同的如下图标的背景颜色
方法：本来通过计算属性渲染出随机颜色，然而计算属性是一次性获取值，即使你把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>
以上这篇Vue通过for循环随机生成不同的颜色或随机数的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
相关文章
Feronia
2020-07-21
Serwa
2020-09-19
Claire
2021-05-21
Brigitte
2023-07-20
Abbie
2023-07-20
Yvonne
2023-07-20
Rasine
2023-07-20
Tina
2023-07-20
Kande
2023-07-20
Flower
2023-07-20
Heather
2023-07-20
Tertia
2023-07-20
Fredrica
2023-07-20
Katherine
2023-07-20
Genet
2023-07-20
Orianna
2023-07-20
Ora
2023-07-20