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

最新推荐文章于 2024-06-24 09:45:43 发布

zqian1994

最新推荐文章于 2024-06-24 09:45:43 发布

阅读量8.9k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/zqian1994/article/details/88355623

版权

Vue 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<div class="vote-box layui-form">
   <ul>
     <li v-for="item in voteList"> // 背景色
       <div class="progress" :style="randomRgb(item)"></div>  // 前景色
       <input type="checkbox" name="" :title="item.name" lay-skin="primary">
     </li>
   </ul>
 </div>

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%;
      }
    }
  }