Vue通过for循环随机生成不同的颜色或随机数的实
编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
今天长沙网络推广就为大家分享一篇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循环随机生成不同的颜色或随机数的实例就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。
上一篇：vue 实现特定条件下绑定事件
下一篇：vue 根据选择条件显示指定参数的例子