element ui实现一个页面里跳转上一步下一步

<template>
  <div>
     <div class="deplDeploy">
           <el-steps :active="active" finish-status="success" align-center="center">
             <el-step title="个人信息"></el-step>
             <el-step title="家庭成员以及社会关系"></el-step>
             <el-step title="简历"></el-step>
           </el-steps>
           <div v-if="active === 0">000</div>
           <div v-if="active === 1">123</div>
           <div v-if="active === 2">321</div>
           <div v-if="active === 3">22</div>
           <div class="Btn">
             <el-button @click="prev" v-if="active == 1 || active == 2  ">上一步</el-button>
             <el-button @click="next" v-if="active == 0 || active == 1 ">下一步</el-button>
             <el-button v-if="active == 2">提交</el-button>

           </div>
     </div>
  </div>
</template>

<script>
export default {
data() {
      return {
       active:0
      };
    },
    methods: {
     prev(){
       --this.active;
       if(this.active < 0) this.active = 0
     },
     next() {
       if(this.active++ > 2) this.active = 0;
     }
    }
}
</script>

<style>

</style>