如何渲染多个圆形进度条

Question

如下右侧效果图

部分代码如下：
HTML：

<template v-for=item in list>
  <div class="audioUpRight">
      <div class="circle-bar">
          <div class="circle-bar-left"></div>
          <div class="circle-bar-right"></div>
          <div class="mask">
              <span class="percent">{{item}}%</span>
          </div>
      </div>
 </div>
</template>

后台传来百分比数据：list:[10,50,80,70]

JS：

 //圆形进度条
CircleProgressBar() {
   var percent = parseInt($('.mask :first-child').text());
   var baseColor = $('.circle-bar').css('background-color');
   if (percent <= 50) {
      $('.circle-bar-right').css('transform', 'rotate(' + (percent * 3.6) + 'deg)');
   } else {
      $('.circle-bar-right').css({
         'transform': 'rotate(0deg)',
         'background-color': baseColor
      });
      $('.circle-bar-left').css('transform', 'rotate(' + ((percent - 50) * 3.6) + 'deg)');
   }
},

要如何根据不同数据实现不同圆形进度条？

以上代码取自链接描述

Answer 1

一个demo

<template v-for=item in list>
    <div class="audioUpRight">
        <div class="circle-bar">
            <div style="{{circleProgressBarLeft(item)}}"></div>
            <div style="{{circleProgressBarRight(item)}}"></div>
            <div class="mask">
                <span class="percent">{{item}}%</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
         /**
          * 省略
         */
        methods: {
            circleProgressBarRight(percent) {
                let style = ''
                let baseColor = this.baseColor // 你设置的baseColor
                if (percent <= 50) {
                    style = `transform:rotate(${percent * 3.6})deg);`
                } else {
                    style = `transform:rotate(0deg);background-color': ${baseColor};`
                }
                return style
            },

            circleProgressBarLeft(percent) {
                let style = ''
                if (percent > 50) {
                    style = `transform:rotate(${(percent - 50) * 3.6}deg);`
                }
                return style
            }
        }
    }
</script>

另外给题主两个建议，第一个是不要在template上循环，另一个是既然使用了vue,就应该理解数据驱动，而不是直接去操作dom。

Answer 2

直接用element-ui的Progress组件
https://element.eleme.cn/#/zh...

Answer 3

不太懂你所谓的项目限制是什么，提出来作为模板v-for循环渲染的确是个好的方案，这时候建议：style动态设置样式