vue中css画已完成和未完成百分比的进度条

你可以使用Vue中的CSS样式来创建一个简单的进度条，如下所示：

HTML代码：

<div class="progress-bar">
  <div class="progress-bar-completed" :style="{width: completedPercentage + '%'}">
    {{completedPercentage}}%
  </div>
</div>

CSS代码：

.progress-bar {
  height: 20px;
  background-color: #ddd;
  border-radius: 10px;
  margin-bottom: 10px;
}

.progress-bar-completed {
  height: 20px;
  background-color: #4caf50;
  border-radius: 10px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  transition: width 0.5s ease-in-out;
}

Vue组件代码：

<template>
  <div class="progress-bar">
    <div class="progress-bar-completed" :style="{width: completedPercentage + '%'}">
      {{completedPercentage}}%
    </div>
  </div>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      required: true
    },
    completed: {
      type: Number,
      required: true
    }
  },
  computed: {
    completedPercentage() {
      return ((this.completed / this.total) * 100).toFixed(2);
    }
  }
};
</script>

<style>
.progress-bar {
  height: 20px;
  background-color: #ddd;
  border-radius: 10px;
  margin-bottom: 10px;
}

.progress-bar-completed {
  height: 20px;
  background-color: #4caf50;
  border-radius: 10px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  transition: width 0.5s ease-in-out;
}
</style>

在上面的代码中，我们使用了一个Vue组件来创建进度条，并接受了两个属性：total和completed，分别表示总数和已完成的数量。通过计算属性completedPercentage，我们可以得到已完成的百分比，并将其应用到进度条的宽度上。

在模板中，我们使用了动态绑定样式的方式来设置已完成进度条的宽度，同时在进度条内部显示当前的百分比。