【Vue】el-button按钮显示/隐藏

路由跳转不同页面，显示相应的按钮，在这里，小编介绍一下如何设置el-button的隐藏和显示，仅做笔记，请多指教！

实现效果：
添加/编辑页面 显示取消、发布、保存；详情页，如果是已发布状态，显示下线：


实现代码如下：
定义四个按钮：

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

总结：
每一个小细节，都能给用户很好的体验，致敬伟大的计算机科学！
计算机的美妙想法来自生活，感恩伟大的奠基者！