动态进度栏-Vuejs

Question

由于我是Vue和JS的新手。我在制作动态进度栏时遇到一些困难。此栏表示已经进行了多少次测验。根据下面的照片。

下面是我的创建栏的CSS和HTML。

.progressbar {
    width: 100%;
    height: 5px;
    background-color: #eee;
    margin: 1em auto;
    transition: width 500ms;
}

HTML

<div class="progressbar">
  <div class="progressbar text-center" 
       style="background-color: green; margin: 0; color: white;"
       :style="{width: progress + '%'}">
    {{ progress }} 
  </div>
</div>

如何增加它？

Answer 1

将progress放入data并为我工作：

data() {
    return {
      progress: 70,
    }
  }

如果您不知道如何计算进度，就可以这样做：

methods: {
  updateProgres() {
    this.progress=completedSteps/totalSteps*100
  }
}