v-for el-steps

v-for指令是Vue.js中常用的一个循环渲染指令，它常用于`el-steps`组件（Element UI中的步骤条）中，帮助动态生成步骤列表。当你需要根据数据数组动态显示一系列步骤时，可以这样使用：

<template>
  <el-steps :active="activeIndex" v-for="(step, index) in stepsList">
    <el-step :title="step.title" :description="step.description" :status="step.status" @click="handleStepClick(index)">
      <!-- 可能包含更多步骤属性如icon、finish-icon等 -->
    </el-step>
  </el-steps>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0,
      stepsList: [
        { title: '步骤一', description: '这是第一步' },
        { title: '步骤二', description: '这是第二步' },
        // ... 其他步骤数据
      ]
    };
  },
  methods: {
    handleStepClick(index) {
      this.activeIndex = index; // 更新当前激活步骤的索引
    }
  }
};
</script>

在这个例子中，`stepsList`是一个数组，包含了每个步骤的对象，包括标题(title)，描述(description)以及可能的状态(status)等。`v-for`会遍历这个数组，为每个步骤创建一个新的`el-step`元素，并通过`:index`绑定到当前迭代的项。