显示所有数据后如何停止渲染 vue carousel 组件

问题描述

正如标题所说，我想在显示数据后或 x 秒后停止渲染 vue carousel 组件。我还没有找到任何相关信息。我知道这样做很......奇怪，但我仍然想知道如何，对于某些项目。代码如下：

        <div class="col-md-12 col-sm-12 col latest-news max-width">
              <carousel
                :per-page="1"
        :mouse-drag="false"
        :autoplay="true"
        :paginationEnabled="false"
        :loop="true"
        :speed="1500"
        :autoplayTimeout="7000"
      >
        <slide v-for="post in posts_1" :post="post" :key="post.id">
          <NewsTitle class="most-important" :post="post" :key="post.id" />
        </slide>
      </carousel>
    </div>

解决方法

这是你需要的吗？

<template>
    <carousel
        v-if="showCarousel"
        ...
    >
        ...
    </carousel>
</template>

<script>
export default {
    data: function(){
        return {
            showCarousel: true,}
    },methods: {
        hideCarousel: function(){
            setTimeout(() => {
                this.showCarousel = false;
            },5000);
        }
    },created: function(){
        this.hideCarousel();
    }
}
</script>

如果你想隐藏你的轮播，你应该依赖于 showCarousel 变量。您还需要将条件 v-if="showCarousel" 添加到您的 carousel 标签。我的代码应该在 5000 毫秒或 5 秒后隐藏轮播。

javascript vue.js