【Vue】v-if による条件分岐

Vueを使った案件に関わるようになりましたので、少しずつアウトプットしようと思います。
これまで、実務で触るのは初めてなので、初歩からやっていきます。

曜日と時間帯での表示分岐をやりましたので、書いておきます。

v-if で、表示をわける

v-ifは、trueかfalseに基いて、条件的に描画したいときに使います。

今回は、曜日と日時によって、trueかfalseを、変数に保持することで、表示を切り替えます。

まずは、条件の真偽を分けるコードを書きます。

data() {
　 return {
 　 displayHour: false,
　 };
},

const now = new Date();
const hour = now.getHours();
const day = now.getDay();
//日曜から土曜日を0から6の整数で取得する

if(day === 0) {　//日曜の〇〇時
 this.displayHour = hour >= 〇〇 || hour < 〇〇;
} else {　//平日の〇〇時
 this.displayHour = hour >= 〇〇 || hour < 〇〇;
}

上記の条件分岐に当てはまったら、trueが返ってきます。

テンプレート内で、表示を分ける。

<div v-if="displayHour">
  必要な描画
</div>

以上になります。