Vue通过v-for循环随机生成颜色

在这里插入图片描述

  • // 背景色
    // 前景色
data(){
	return {
		voteList: [
	          {
	            name: 'A',
	            num: 12,
	            total: 24,
	            bg: '#f00'
	          }, {
	            name: 'B',
	            num: 4,
	            total: 24,
	            bg: '#0f0'
	          }
	        ]
	}
}
methods: {
      randomRgb(item) {
        let R = Math.floor(Math.random() * 255);
        let G = Math.floor(Math.random() * 255);
        let B = Math.floor(Math.random() * 255);
        return {
          width: (item.num / item.total * 100) + '%', // 进度条
          background: 'rgb(' + R + ',' + G + ',' + B + ')'
        };
      }
   }
// css处使用了scss预处理
 .vote-box {
    li {
      position: relative;
      margin-top: 4px;
      background-color: #ccc;
      .progress {
        content: '';
        position: absolute;
        left: 18px;
        top: 0;
        height: 100%;
      }
    }
  }

你可能感兴趣的:(VUE)