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

總結：
每一個小細節，都能給用戶很好的體驗，致敬偉大的計算機科學！
計算機的美妙想法來自生活，感恩偉大的奠基者！