[Vue] el-button button Show / Hide

Jump route different page, display the corresponding buttons here, Xiao Bian tell us about how to set el-button hidden and revealed only do notes, please advise!

To achieve the effect:
add / edit page displays canceled, publishing, preservation; details page, if the state is released, show off the assembly line:


codes are as follows:
the definition of four buttons:

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

Define the display status:

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

Initialization init state:

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

Summary:
every little detail, can give the user a good experience, to pay tribute to the great computer science!
Wonderful idea computer from life, the founder of the great Thanksgiving!