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

【问题标题】：autohide an element in VueJS after 1 second1秒后自动隐藏VueJS中的元素
【发布时间】：2019-08-06 21:56:59
【问题描述】：

好的，所以我是 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 秒后没有任何点击事件

【问题讨论】：

标签： vue.js vuejs2 settimeout vue-cli

【解决方案1】：

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

Method Created 实例创建后同步调用。

<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>

【讨论】：