Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)


Posted in Javascript onJanuary 16, 2020

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实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
jQuery常用选择器详解
Jul 17 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 Javascript
浅谈webpack组织模块的原理
Mar 10 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 #Javascript
使用Karma做vue组件单元测试的实现
Jan 16 #Javascript
js实现div色块拖动录制
Jan 16 #Javascript
微信小程序实现二维码签到考勤系统
Jan 16 #Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 #Javascript
JavaScript实现简单的计算器
Jan 16 #Javascript
js面向对象之实现淘宝放大镜
Jan 15 #Javascript
You might like
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
JS实现小米轮播图
2020/09/21 Javascript
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python获取本地计算机名字的方法
2015/04/29 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
Noon埃及:埃及在线购物
2019/11/26 全球购物
PHP经典面试题
2016/09/03 面试题
招聘单位介绍信
2014/01/14 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
公司委托书格式
2014/08/01 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
消费者理赔投诉书
2015/07/02 职场文书