개요

자바스크립트를 배우는 동시에 기존의 웹 페이지를 Vue로 바꿨다.js화를 하고 있는데 그 과정에서 홈페이지에 자주 알림이 있는 녀석을 만들어 봤어요.
학습기록과 메모를 함께 공개합니다.

쓰던 물건

Vue.js

bootstrapVue

dayjs

만들어진 물건

DateBadge.vue

<template>
  <b-badge :variant="Valobject(date)">{{ date }}</b-badge>
</template>
<script>
//一週間過ぎたら色を変えるすごいやつだよ
//dayjsを使っているので利用する場合はいれてね
export default {
  name: "DataBadge",
  props: {
    date: String
  },
  methods: {
    Valobject(date) {
      return this.$dayjs(date).isBefore(
        this.$dayjs()
          .subtract(1, "week") //期間を変えたいならこの辺いじってね
          .format("YYYY/MM/DD")//日付の表示形式
      )
        ? "lighten"
        : "danger";
    }
  }
};
</script>