[Vue.js] 표시된 후 3초 후에 자동으로 사라지는 섬광 메시지의 예시 코드

입문

환경

OS: macOS Catalina 10.15.1
Vue: 2.6.10

결론: 인코딩

<template>
  <div>

    <!-- v-ifで<script>内のshowがtrueであれば表示する -->
    <div
      class="flash"
      v-if="show === true"
    >
      this is flash message!
    </div>

    <!-- clickしたらmethods:{}内のshowFlashが発火する -->
    <button
      @click="showFlash"
    >
      show flash message
    </button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
      }
    },

    // Vueインスタンスに変化があったら発動する
    updated() {

      // setTimeoutで3000ms後にshowをfalseにする
      setTimeout(() => {
        this.show = false}
        ,3000
      )
    },
    methods: {
      showFlash(){
        this.show = true;
      }
    }
  }
</script>

<style>
.flash {
  width: 200px;
  height: auto;
}
button {
  width: 200px;
  height: 30px;
  background: red;
  border-radius: 5px;
}
</style>

2020/01/22 수정 내용 추가

<template>
  <div>

    <!-- v-ifで<script>内のshowがtrueであれば表示する -->
    <div
      class="flash"
      v-if="show"
    >
      this is flash message!
    </div>

    <!-- 略 -->
</template>

<script>
  export default {
//...略
    methods: {
      showFlash(){
        this.show = true;
      // setTimeoutで3000ms後にshowをfalseにする
        setTimeout(() => {
          this.show = false}
          ,3000
        )
      }
    }
  }
</script>

끝내다

참고로 사이트 (항상 감사합니다)