当前位置:   article > 正文

vue设置div块隐藏与显示(v-show)_vue显示隐藏div

vue显示隐藏div

任务要求:鼠标移入导航圆圈后显示导航栏

  1. <el-button circle style="position: fixed;
  2. left:0px;
  3. top:300px;
  4. width: 50px;
  5. height: 50px;
  6. color: white;
  7. background: rgb(31, 56, 128);"
  8. v-on:mouseover="isShow()"
  9. >导航</el-button>
  10. <div class="announce_left" >
  11. <el-button v-for="(item,index) in news" style="width: 200px;margin-left: 0px;" v-on:mouseover="goToAnnounce(index)" v-show="show">{{item.title}}</el-button>
  12. </div>

通过show的值来控制div块的隐藏与显示

show为false则隐藏,为true则显示

初始令show为false

鼠标移入导航后显示导航栏

  1. isShow(){
  2. this.show=true;
  3. },

效果图:

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:【wpsshop博客】
推荐阅读