隐藏显示按钮

初学前端学习过程中参与工程实现的简单功能 逻辑不成熟 仅起记录作用
html代码

将要显示隐藏的主体部分绑定和隐藏按钮一样的v-show=“isShow”

<button class="shrink" @click="navLeftHidden" v-show="isShow">

  <img src="@/assets/img/shrink.png" alt="">  //   与主体部分一起显示的显示按钮
   
   </button>

  <button class="eject" @click="navLeftHidden"  v-show="!isShow">

    <img src="@/assets/img/eject.png" alt="">  //    隐藏按钮

  </button>

script代码

export default {

  data () {

    return {

         isShow:true    // 默认显示

    }

},


  navLeftHidden () {

  // 隐藏
      this.isShow= !this.isShow

   }

},

CSS代码： // 实现定位改变位置

.shrink{

position:absolute;           /*定位 将按钮放在指定的位置*/

     top:50%;

     left:100px;

      z-index:111;           /*将按钮移到最上层 不被其他部分遮挡  数字越大越在上面*/

 }

.eject{

position:absolute;

 top:50%;

 z-index:111; 

}

样式：