v-ifを理解する！！ - subaru-hello’s blog

ユーザーがいるページに応じて表示する内容に制限をかけたり、ゲストか会員かどうかに応じてなどの条件分岐を実装したい。

v-if条件分岐レンダリングというものがあるらしい。学習していく。

v-ifって何

v-if ディレクティブは、ブロックを条件に応じて描画したい場合に使用されます。ブロックは、ディレクティブの式が真を返す場合のみ描画されます

vue版条件分岐メソッドといったところか。

<template v-if= "user.admin?">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

条件が真のときに<template>要素全体が表示され、偽のときには<template>要素全体が非表示になる。今回の場合だと、userがadminの場合template内の要素がviewで表示されるようになる。

どんな使い方がある？

出力された値に応じて条件分岐

関数の結果に応じて表示させることができる。

<div v-if="Math.random() > 0.5">
  Now you see me
</div><div v-else>
  Now you don't
</div>

Math.randomが0.5以上だった場合とそれ以外とで表示内容を分けている。

2. enumを使って条件分岐

v-ifとenumを組み合わせて描画するボタンを管理している。

<v-btn
v-if="user.drunk_state===‘ tipsy'"
depressed
color="primary"
class="ma-2"
href="/admin"
>酒ケジュールを見る</v-btn>

3. ページによって条件分岐

現在ユーザーがいるページに合わせて表示する内容を変える

divタグに充てることも出来る。

<div v-if="isMypage">
<v-btn class="ma-2" outlined color="primary" @click="$emit('push-edit')">
<v-icon left>mdi-pencil</v-icon>編集
</v-btn>
</div>

<script>
<--omit-->
computed: {
isMypage() {
return this.$route.path.includes("/mypage/")
}
}
<--omit-->
<\\script>