el-button 显示与隐藏

今天在学习 vue 的过程中用到了 el-button, 这里简单记录下怎么实现 el-button 的显示与隐藏。

背景

如图，有 “发布”, “草稿”, “修改” 三个按钮，当点击 “添加文章” 按钮时，希望 “修改” 按钮可以隐藏，当点击 编辑 按钮时，希望 “发布”, “草稿” 按钮可以隐藏。

实现

使用 v-show 属性，在 el-button 中添加 v-show 属性，并在脚本中定义相对应的值。

<el-button type="primary" v-show="showFabu" @click="addArticle('已发布')">发布</el-button>
<el-button type="info" v-show="showCaogao" @click="addArticle('草稿')">草稿</el-button>
<el-button type="primary" v-show="showUpdate" @click="updateArticle">修改</el-button>

const showFabu = ref(false)
const showCaogao = ref(true)
const showUpdate = ref(true)

例如给 “添加文章” 按钮添加点击事件，当点击时 将 showUpdate 的值变为 false，编辑时同理。
最终实现结果