автоматически скрывать элемент в VueJS через 1 секунду - PullRequest
Новая
       15

автоматически скрывать элемент в VueJS через 1 секунду

1 голос
/ 15 марта 2019

ОК, так что я новичок в 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 Ответ

1 голос
/ 15 марта 2019

Вы можете просто добавить свойство в объект данных и использовать директиву v-show, чтобы определить, должен ли элемент быть видимым или нет. Если логическое значение false, элемент скрыт, если true, элемент видим.

Метод 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>
...