1초 후 VueJS에서 요소 자동 전환

1초 후 VueJS에서 요소 자동 전환

좋아, 그래서 나는 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 지시어를 사용하여 요소가 표시되어야 하는지 여부를 결정할 수 있다.부울이 거짓이면 요소가 숨겨져 있고, 참이면 요소가 보인다.

인스턴스 생성 후 동기적으로 호출되는 메서드.

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

참조URL: https://stackoverflow.com/questions/55189061/autohide-an-element-in-vuejs-after-1-second