vue不使用v-if与v-show的情况下显隐标签

实现代码如下

定义按钮

<el-button @click="visible = false" :style="{ display: visibleCancel }">取消</el-button> <el-button type="primary" @click="dataPublish()" :style="{ display: visiblePublish }">发布</el-button> <el-button type="primary" @click="dataFormSubmit()" :style="{ display: visibleSubmit }">保存</el-button> <el-button type="primary" @click="handleStatus()" :style="{ display: visibleLine }">下线</el-button>

定义显示状态

data () { return { visibleCancel: '', //显示 visiblePublish: '', //显示 visibleSubmit: '', //显示 visibleLine: 'none' //隐藏 } }

初始化init状态：

init (id,state,flag) { this.dataForm.id = id || 0 //如果点详情 if (flag === 1) { this.disable = true //如果已发布状态，显示按钮：下线 if (state === 1) { this.visiblePublish = 'none' this.visibleSubmit = 'none' this.visibleLine = '' this.visibleCancel = 'none' }else { this.visiblePublish = 'none' this.visibleSubmit = 'none' this.visibleLine = 'none' this.visibleCancel = 'none' } } }