例子:当一个页面上,需要编辑,审核,查看详情的时候,隐藏和展示
<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>