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'
     }
   }
}