来一张效果图
下面说一下核心代码:
html_5">html代码
html" title=javascript>javascript"> <ul>
<li v-for="count in this.floor"
:key="count" :style="randomRgb(item)" > {{count}}F</li>
</ul>
html" title=js>jsstyle_14">html" title=js>js部分,用过style绑定一个函数如下:
html" title=javascript>javascript">randomRgb(item) {
let R = Math.floor(Math.random() * 130+110);
let G = Math.floor(Math.random() * 130+110);
let B = Math.floor(Math.random() * 130+110);
return {
background: 'rgb(' + R + ',' + G + ',' + B + ')'
};
}
在里面可以设置颜色 Math.floor(Math.random() * 130+110)
这里面的数值可以自己改,来控制颜色的大体范围。最后通过 return 返回给 style
这样一搞,顿时好看多了,今天真是受教了,没想到还可以这么写。原文链接:https://blog.csdn.net/Jadeyqc/article/details/104445785