vue实现动态分段的进度条

可以使用vue的computed属性来实现动态分段的进度条。首先，需要定义一个数组来存储每个分段的进度值，然后通过computed属性计算总进度值和每个分段的宽度。最后，使用CSS样式来渲染进度条。以下是示例代码：

HTML:

<div class="progress-bar">
  <div v-for="(item, index) in progress" :key="index" :style="{ width: item.width + '%' }"></div>
</div>

CSS:

.progress-bar {
  width: 100%;
  height: 10px;
  background-color: #ddd;
}

.progress-bar div {
  height: 100%;
  float: left;
}

.progress-bar div:nth-child(odd) {
  background-color: #4CAF50;
}

.progress-bar div:nth-child(even) {
  background-color: #2196F3;
}

Vue:

data() {
  return {
    progress: [
      { value: 20 },
      { value: 30 },
      { value: 50 }
    ]
  }
},
computed: {
  totalProgress() {
    return this.progress.reduce((total, item) => total + item.value, 0)
  },
  progressWidth() {
    return this.progress.map(item => ({ width: (item.value / this.totalProgress) * 100 }))
  }
}

这样就可以实现一个动态分段的进度条了。