Vue.js 怎样1秒后自动隐藏VueJS中的元素

发布于03月16日

好的，我对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秒后自动隐藏它，而不需要用户每次进入该组件(这是一个新的"页面")时发生任何点击事件

推荐答案

您可以在数据对象中添加一个属性，然后使用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>