vue 解决v-for 循环列表生成不同背景颜色问题

来一张效果图

下面说一下核心代码：

html代码

 <ul> 
     <li v-for="count in this.floor" 
     :key="count" :style="randomRgb(item)" > {{count}}F</li>
  </ul> 

js部分，用过style绑定一个函数如下：

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