vue 怎么隐藏内容

本教程操作环境：Windows10系统、Vue 3版、Dell G3电脑。

vue 怎么隐藏内容？

vue实现点击某个div出现和隐藏内容功能

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视频教程》

以上就是vue 怎么隐藏内容的详细内容，更多请关注Work网其它相关文章！