bootstap-vueで一定時間経過すると色が変わるあいつをつくってみた

概要

javascriptのお勉強がてらに、既存のページを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>