vue 如何写一个简单的步骤条

你可以使用 Vue.js 来实现一个简单的步骤条，具体实现如下：

1. 在 Vue 组件中定义一个数组，用于存储步骤条的每个步骤的名称和状态，例如：

data() {
  return {
    steps: [
      { name: 'Step 1', completed: true },
      { name: 'Step 2', completed: false },
      { name: 'Step 3', completed: false }
    ]
  }
}

2. 在模板中使用 v-for 指令遍历数组，渲染每个步骤的名称和状态，例如：

<div class="steps">
  <div v-for="step in steps" :key="step.name" class="step" :class="{ completed: step.completed }">
    {{ step.name }}
  </div>
</div>

3. 在样式表中定义步骤条的样式，例如：

.steps {
  display: flex;
  justify-content: space-between;
}

.step {
  width: 100%;
  max-width: 100px;
  text-align: center;
  color: #999;
}

.completed {
  color: #333;
  font-weight: bold;
}

4. 在 Vue 组件中定义一个方法，用于更新步骤条的状态，例如：

methods: {
  updateStepStatus(index) {
    this.steps.forEach((step, i) => {
      step.completed = i <= index;
    });
  }
}

5. 在模板中使用 @click 指令绑定更新步骤条状态的方法，例如：

<div class="buttons">
  <button @click="updateStepStatus(0)">Step 1</button>
  <button @click="updateStepStatus(1)">Step 2</button>
  <button @click="updateStepStatus(2)">Step 3</button>
</div>

这样，一个简单的步骤条就实现了。你可以根据需求来自定义样式和更新步骤条状态的方法。