我想要实现的场景是，有两个按钮，但页面上只显示一个按钮，另一个隐藏。通过点击按钮时触发事件，先前显示的按钮隐藏，而另一个按钮渲染出来进行其他的事件调用。
如一下gif图所示效果。用到了Element-UI的按钮元素。
有两种方法，效果类似：① 动态绑定Vue的class属性；② 动态绑定Vue的内联样式style属性；
详情见文档：Class 与 Style 绑定 — Vue.js
我的代码 ：只介绍第一种。
<el-button type="primary" @click="edit" :class="{ active: isActive }" size="mini">编辑</el-button><el-buttontype="primary"@click="dialogVisible = true":class="{ active1: isActive1 }"style="margin-left:0px" size="mini">提交</el-button>
data(){ return {isActive: false, //设置按钮的初始显示，当布尔值为true时，对应的属性active生效，即隐藏isActive1: true, //同上}，methods:{edit() {this.isActive = !this.isActive; //当点击按钮触发事件时改变两个按钮的显示this.isActive1 = !this.isActive1;},}}
.active {display: none; // 隐藏}.active1 {display: none; //隐藏}
初始时，第一个按钮的布尔值为false，所以不会隐藏，当点击按钮时，调用edit事件，届时布尔值取反，第一个按钮布尔值为true，第二个为false，所以第二个按钮显示，而第一个隐藏。
这里由于我的第二个按钮有其他事件触发，所以没有单独写按钮事件，各位可以自行根据需要补齐。同第一个按钮样，点击第二个按钮时，取反布尔值即可实现显示和隐藏。
