1秒后自动隐藏VueJS中的元素

时间:2019-03-15 18:52:37

标签: vue.js vuejs2 settimeout

好,所以我是Vue的新手(基本上是JS的新手,但是我现在正在玩Vue),而我想做的是自动隐藏其中的一个元素(不要单击)组件的模板标签。在jQuery中,它看起来像:

$(function() {
    setTimeout(function() {
        $(".hideElement").hide()
    }, 1000);
});

但是这在Vue中如何工作?我的组件看起来像这样:

<template>
<div>
 <h1 class="hideElement"> HELLO </h1>
</div>
</template>

<script> // nothing here 
</script>

<style> // nothing here
</style>

我知道如何在单击按钮时切换元素,但是我只想在1秒钟后自动隐藏它,而每次用户每次进入此组件(这是一个新的“页面”)时都没有任何点击事件。

1 个答案:

答案 0 :(得分:1)

您可以只在数据对象中添加一个属性,然后使用v-show指令确定该元素是否可见。如果布尔值为false,则元素是隐藏的;如果为true,则元素是可见的。

创建实例后创建的方法被同步调用。

<template>
    <div>
        <h1 v-show="elementVisible" class="hideElement"> HELLO </h1>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                elementVisible: true
            }
        },

        created() {
            setTimeout(() => this.elementVisible = false, 1000)
        }
    }
</script>