使用Vue实现点击显示再点击隐藏效果的示例

这篇文章给大家分享的是有关使用Vue实现点击显示再点击隐藏效果的示例的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联是一家专业提供舟曲企业网站建设,专注与成都网站设计、成都做网站、H5技术、小程序制作等业务。10年已为舟曲众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。

平时项目中，经常会做一些下拉菜单等效果，这种效果可能会需要通过一个按钮来控制显示隐藏，并且当点击页面其他空白区域时，也要将其隐藏。

简单写个Demo

 
 显示或隐藏
 
 
  
  内容{{index}}

@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实现点击显示再点击隐藏效果的示例”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

新闻名称：使用Vue实现点击显示再点击隐藏效果的示例
文章起源：http://ybzwz.com/article/gesjee.html

使用Vue实现点击显示再点击隐藏效果的示例

其他资讯