vue设置div块隐藏与显示(v-show)
vue设置div块隐藏与显示(v-show)
·
任务要求:鼠标移入导航圆圈后显示导航栏
<el-button circle style="position: fixed;
left:0px;
top:300px;
width: 50px;
height: 50px;
color: white;
background: rgb(31, 56, 128);"
v-on:mouseover="isShow()"
>导航</el-button>
<div class="announce_left" >
<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>
</div>
通过show的值来控制div块的隐藏与显示
show为false则隐藏,为true则显示
初始令show为false
鼠标移入导航后显示导航栏
isShow(){
this.show=true;
},
效果图:
更多推荐
已为社区贡献1条内容
所有评论(0)