【前端学习日记】Vue中通过点击事件隐藏按钮和显示按钮

        我想要实现的场景是，有两个按钮，但页面上只显示一个按钮，另一个隐藏。通过点击按钮时触发事件，先前显示的按钮隐藏，而另一个按钮渲染出来进行其他的事件调用。

        如一下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-button
          type="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，所以第二个按钮显示，而第一个隐藏。

        这里由于我的第二个按钮有其他事件触发，所以没有单独写按钮事件，各位可以自行根据需要补齐。同第一个按钮样，点击第二个按钮时，取反布尔值即可实现显示和隐藏。