这篇文章给大家分享的是有关使用Vue实现点击显示再点击隐藏效果的示例的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
平时项目中，经常会做一些下拉菜单等效果，这种效果可能会需要通过一个按钮来控制显示隐藏，并且当点击页面其他空白区域时，也要将其隐藏。
简单写个Demo
计算
安全
数据库
网络和加速
企业服务
<!-- 按钮 -->
<button @click.stop="ShowHidden = !ShowHidden">显示或隐藏</button>
<!-- 下拉列表 -->
<div v-if="ShowHidden" @click.stop="">
<!-- 列表内容 -->
<p v-for="(item,index) in 5" :key="index" @click="ConBtn(index)">内容{{index}}</p>
</div>@click.stop="" 为组织冒泡
data中定义ShowHidden
data () {
return {
ShowHidden: false
}
},mounted中写上下方代码，点击页面事件
mounted () {
document.addEventListener('click', this.HiddenClick)
},methods中写入下方代码
methods: {
// 点击页面事件 隐藏需要隐藏的区域
HiddenClick () {
this.ShowHidden = false
},
// 点击列表内，选中内容，并隐藏
ConBtn (val) {
alert('内容' + val)
this.ShowHidden = false
}
}这样，一个简单的效果就实现了，如果页面中需要使用多，那么方法一样，只需在要点击显示事件中，执行一次让其他下拉隐藏即可
感谢各位的阅读！关于“使用Vue实现点击显示再点击隐藏效果的示例”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
