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

Posted

技术标签:

【中文标题】1秒后自动隐藏VueJS中的元素【英文标题】:autohide an element in VueJS after 1 second 【发布时间】: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 秒后没有任何点击事件

【问题讨论】:

【参考方案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>

【讨论】:

以上是关于1秒后自动隐藏VueJS中的元素的主要内容,如果未能解决你的问题,请参考以下文章

javascript 5秒后自动隐藏菜单demo

滚动时隐藏VueJs中的元素

使用 v-cloak 隐藏 Vuejs 渲染中的元素

显示 1 秒后自动关闭模式 - swiftui

如何一一自动隐藏多个警报。先进先出?

《手把手教你》系列技巧篇(四十九)-java+ selenium自动化测试-隐藏元素定位与操作(详解教程)