您的位置：首页 > 编程技术 > js  >  vue实现点击某个div显示与隐藏内容功能实例

vue实现点击某个div显示与隐藏内容功能实例

 更新时间：2022年12月4日 14:29  点击：1040 作者：渊来有你

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>

  1. 通过vue.js 事件的.stop修饰符可以阻止事件继续冒泡传播，也可以使用原生js事件的event.stopPropagation()方法。
  2. 通过向指定的div添加.stop，可以实现只有点击非该div内的元素时，才会往上冒泡至page，从而实现点击其他地方隐藏div。
  3. 要向触发显示div的按钮添加.stop，否则一点击按钮，触发show()之后传播到page，立马就会触发hide()，div就无法显示。

总结

到此这篇关于vue实现点击某个div显示与隐藏内容功能的文章就介绍到这了,更多相关vue点击div显示与隐藏内容内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

原文出处：https://blog.csdn.net/weixin_51935690/article/details/115269

[!--infotagslink--]

相关文章

  • js控制页面控件隐藏显示的两种方法介绍

    javascript控制页面控件隐藏显示的两种方法，方法的不同之处在于控件隐藏后是否还在页面上占位 方法一： 复制代码 代码如下: document.all["panelsms"].style.visibility="hidden"; document.all["panelsms"].style.visi...2013-10-13

  • 利用JS实现点击按钮后图片自动切换的简单方法

    下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-25

  • C#隐式运行CMD命令（隐藏命令窗口）

    这篇文章主要介绍了C#隐式运行CMD命令（隐藏命令窗口）,本文实现在winform窗口中运行CMD命令,需要的朋友可以参考下...2020-06-25

  • 基于JavaScript实现文字超出部分隐藏

    这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01

  • jQuery实现广告显示和隐藏动画

    这篇文章主要为大家详细介绍了jQuery实现广告显示和隐藏动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-07-05

  • 基于JavaScript实现表单密码的隐藏和显示出来

    为了网站的安全性，很多朋友都把密码设的比较复杂，但是如何密码不能明显示，不知道输的是对是错，为了安全起见可以把密码显示的，那么基于js代码如何实现的呢？下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示，需要的朋友参考下...2016-03-03

  • C#中动态显示当前系统时间的实例方法

    想在网页中动态地显示当前系统的时间，找了好多，不过都是一些停在那里不动的。。。不过皇天不负有心人，终于让我找到了...2020-06-25

  • jQuery 隐藏和显示 input 默认值示例

    复制代码 代码如下: <!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插件实现鼠标隐藏

    这篇文章主要为大家详细介绍了jquery插件实现鼠标隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-05-14

  • C#实现动态显示及动态移除图片方法

    这篇文章主要介绍了C#实现动态显示及动态移除图片方法,对于C#的初学者了解图像操作有一定的帮助,需要的朋友可以参考下...2020-06-25

  • 解决druid监控页面SQL不显示的问题

    这篇文章主要介绍了解决druid监控页面SQL不显示的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-06-19

  • javascript点击按钮实现隐藏显示切换效果

    这篇文章主要介绍了javascript点击按钮实现隐藏显示切换效果，以一个完整的实例为大家分析了js点击按钮实现隐藏显示切换的功能，感兴趣的小伙伴们可以参考一下...2016-02-05

  • JavaScript判断按钮被点击的方法

    javascript代码判断按钮是否被点击了在项目中经常会遇到这个需求，今天小编抽点时间给大家分享一段代码关于javascript判断按钮是否被点击的方法，感兴趣的朋友一起学习吧...2015-12-14

  • js控制TR的显示隐藏

    在很多现实的场景中，有的文本框我们希望在选择“是”的按钮之后才出现，这就需要js控制TR的隐藏和显示，如何控制，本文为大家揭晓...2016-03-07

  • PyQt5实现多张图片显示并滚动

    最近要做个网页图片批量下载工具，然后需要一个页面显示网页上的所有图片供用户勾选，再根据勾选的内容来下载指定图片，其中就涉及到要到同时显示多张图片，本文就来介绍一下...2021-06-11

  • R语言-在一张图上显示多条线的实现

    这篇文章主要介绍了R语言-在一张图上显示多条线的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-06

  • JavaScript实现下拉菜单的显示隐藏

    这篇文章主要为大家详细介绍了JavaScript实现下拉菜单的显示隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-30

  • C#实现让窗体永远在窗体最前面显示的实例

    这篇文章主要介绍了C#实现让窗体永远在窗体最前面显示,功能非常实用,需要的朋友可以参考下...2020-06-25

  • JS实现网页游戏中滑块响应鼠标点击移动效果

    本文实例讲述了JS实现网页游戏中滑块响应鼠标点击移动效果。分享给大家供大家参考，具体如下：这是网页游戏中的一个有趣效果，可以完成以下几个动作：滚动、scroll 8个方向、鼠标坐标获娶对象上下左右位置获取，大家可以自己添...2015-10-21

  • c#实现隐藏与显示任务栏的方法详解

    本篇文章是对c#中任务栏隐藏与显示的实现方法进行了详细的分析介绍，需要的朋友参考下...2020-06-25