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 相关文章推荐
JavaScript 监听textarea中按键事件
Oct 08 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
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 分页分组类
2009/12/10 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
thinkphp判断访客为手机端或PC端的方法
2014/11/24 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
php数组随机排序实现方法
2015/06/13 PHP
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
vue-cli3.0 环境变量与模式配置方法
2018/11/08 Javascript
Python操作mongodb的9个步骤
2018/06/04 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
python+os根据文件名自动生成文本
2019/03/21 Python
如何使用Python 打印各种三角形
2019/06/28 Python
python 设置输出图像的像素大小方法
2019/07/04 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
用python发送微信消息
2020/12/21 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
Linux开机引导的步骤是什么
2015/10/19 面试题
本科毕业生应聘求职信
2014/07/06 职场文书
销售内勤岗位职责
2015/02/10 职场文书
Python爬虫基础初探selenium
2021/05/31 Python
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers