vue实现点击某个div显示与隐藏内容功能实例
更新时间:2022年12月4日 14:29 点击:1047 作者:渊来有你
1.首先在所需要隐藏或显示的内容div加v-show,代表判断是否显示或隐藏
<div v-show="shopShow">内容</div>
2.我这里是在打开内容中有一个 × 号来关闭显示效果,在iconfont图标的div加入一个点击事件
<div @click="toggleShopShow"> <span class="iconfont icon-close"></span> </div>
3.在export default中代码如下
export default { data () { return { shopShow: false, //默认内容不显示 } }, methods: { toggleShopShow () { this.shopShow = !this.shopShow //使false变为true显示 }, } } </script>
即可实现
4.为其隐藏添加过渡动画效果,如下
在 × 处用transition包裹,并添加name属性
<transition name="fade"> <div class="activity-sheet-close" @click="toggleSupportShow"> <span class="iconfont icon-close"></span> </div> </transition>
为fade添加效果样式,在style中添加
&.fade-enter-active,&.fade-leave-active transition opacity .8s &.fade-enter,&.fade-leave-to opacity 0
则可实现
补充:Vue js 实现点击页面空白处隐藏指定div
<template> <!--向页面添加关闭div的事件监听--> <div class="page" @click="hide"> <!--添加.stop防止page的点击事件触发,导致无法显示div--> <button @click.stop="show">点击显示div</button> <!--指定的div。添加.stop防止点击div内的元素时,整个div被关闭--> <div @click.stop> ... </div> </div> <template> <script> export default { methods:{ show(){}, hide(){} } } </script>
- 通过vue.js 事件的.stop修饰符可以阻止事件继续冒泡传播,也可以使用原生js事件的event.stopPropagation()方法。
- 通过向指定的div添加.stop,可以实现只有点击非该div内的元素时,才会往上冒泡至page,从而实现点击其他地方隐藏div。
- 要向触发显示div的按钮添加.stop,否则一点击按钮,触发show()之后传播到page,立马就会触发hide(),div就无法显示。
总结
到此这篇关于vue实现点击某个div显示与隐藏内容功能的文章就介绍到这了,更多相关vue点击div显示与隐藏内容内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.csdn.net/weixin_51935690/article/details/115269
相关文章
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位 方法一: 复制代码 代码如下: document.all["panelsms"].style.visibility="hidden"; document.all["panelsms"].style.visi...2013-10-13
- 这篇文章主要为大家详细介绍了jQuery实现广告显示和隐藏动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-07-05
- 这篇文章主要介绍了C#隐式运行CMD命令(隐藏命令窗口),本文实现在winform窗口中运行CMD命令,需要的朋友可以参考下...2020-06-25
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht...2014-06-07
- 这篇文章主要为大家详细介绍了jquery插件实现鼠标隐藏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-14
- 想在网页中动态地显示当前系统的时间,找了好多,不过都是一些停在那里不动的。。。不过皇天不负有心人,终于让我找到了...2020-06-25
- 本文实例讲述了JS实现网页游戏中滑块响应鼠标点击移动效果。分享给大家供大家参考,具体如下:这是网页游戏中的一个有趣效果,可以完成以下几个动作:滚动、scroll 8个方向、鼠标坐标获娶对象上下左右位置获取,大家可以自己添...2015-10-21
- 这篇文章主要介绍了C#实现动态显示及动态移除图片方法,对于C#的初学者了解图像操作有一定的帮助,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了解决druid监控页面SQL不显示的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-06-19
- 这篇文章主要介绍了javascript点击按钮实现隐藏显示切换效果,以一个完整的实例为大家分析了js点击按钮实现隐藏显示切换的功能,感兴趣的小伙伴们可以参考一下...2016-02-05
- javascript代码判断按钮是否被点击了在项目中经常会遇到这个需求,今天小编抽点时间给大家分享一段代码关于javascript判断按钮是否被点击的方法,感兴趣的朋友一起学习吧...2015-12-14
- 在很多现实的场景中,有的文本框我们希望在选择“是”的按钮之后才出现,这就需要js控制TR的隐藏和显示,如何控制,本文为大家揭晓...2016-03-07
- 最近要做个网页图片批量下载工具,然后需要一个页面显示网页上的所有图片供用户勾选,再根据勾选的内容来下载指定图片,其中就涉及到要到同时显示多张图片,本文就来介绍一下...2021-06-11
- 这篇文章主要为大家详细介绍了JavaScript实现下拉菜单的显示隐藏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-30
- AI里如何将一些需要保留的元素隐藏?比如页面中有颜色的中心线和文字,暂时性的隐藏起来,等做完所有东西,在要导出的时候再让其出现。请看下面的教程。 1、打开AI软件并...2017-01-22
- 这篇文章主要介绍了R语言-在一张图上显示多条线的实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-06
- 这篇文章主要介绍了C#实现让窗体永远在窗体最前面显示,功能非常实用,需要的朋友可以参考下...2020-06-25