Vue 当一个页面上，需要编辑，审核，查看详情的时候，隐藏和展示

例子：当一个页面上，需要编辑，审核，查看详情的时候，隐藏和展示

<template>
  <div>
    <div v-if="active === '1'" >
      <p>详情内容</p>
      <el-button type="success" @click="editBtn">编辑</el-button>
      <el-button type="success" @click="auditBtn">审核</el-button>
    </div>

    <div v-if="active === '2'">
      <p>编辑内容</p>
      <el-button type="success" @click="editSaveBtn">保存</el-button>
      <el-button type="success" @click="cancelBtn">取消</el-button>
    </div>

    <div v-if="active === '3'">
      <p>审核内容</p>
      <el-button type="success" @click="auditSaveBtn">保存</el-button>
      <el-button type="success" @click="cancelBtn">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active:'1',
    }
  },
  created() {

  },
  methods: {
    // 编辑
    editBtn(){
      this.active='2'
    },
    // 编辑保存
    editSaveBtn(){
      this.active='1'
    },
    // 取消
    cancelBtn(){
      this.active='1'
    },
    // 审核
    auditBtn(){
      this.active='3'
    },
    // 审核保存
    auditSaveBtn(){
      this.active='1'
    },
  }
}
</script>

<style>

</style>