vue 实现进度条效果

这里实现进度条用到了es6语法的模版字符串，通过更改css样式实现正常显示进度的进度条和一种显示剩余余额的进度条：
html代码不需要改变：

<div class="scheduleCont_1_left_1" :class="10 >= 100 ? 'nobg' : ''">
		//10为展示的进度，100为总的进度数量
     <div :style="{ width: `${(10 / 100).toFixed(2) * 100}%` }" class="un_xg_1_3_1"></div>
</div>

正常显示进度的进度条：

.scheduleCont_1_left_1{
    position: relative;
    width: 100%;
    height: 0.36rem;
    background: #E9BBFF;
    border-radius: 50px;
    overflow: hidden;
    .un_xg_1_3_1 {
      position: absolute;
      top: 0;
      left: -1px;
      width: 0;
      height: 0.36rem;
      border-radius: 50px;
      background-image: linear-gradient(to right, #B72DF7);
    }
  }

显示剩余余额的进度条：

.scheduleCont_1_left_1 {
  position: relative;
  width: 100%;
  height: .24rem;
  background: #ebebeb;
  border-radius: 50px;
  overflow: hidden;

  .un_xg_1_3_1 {
    float: right;
    height: .24rem;
    border-radius: 50px;
    background-image: linear-gradient(to right, #ff6666);
  }
}

结束！
感谢大家支持哦