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中的元素的主要内容,如果未能解决你的问题,请参考以下文章