【Nuxt.js】Nuxt文法編：v-if, v-else, v-else-if

# 前置き

今までの記事で
何度も使ってきたv-if！
記事ごとに解説はしていましたが
v-if自体の記事はない😨💦
ということが、ちらほら。。。
そこで文法の記事を投稿していきます🐥💕
今後v-forやv-modelなどを
更新していくのでお楽しみに♪

**❓どんな時に使うか**
表示/非表示の切り替えに使います！
buttonをclickしてモーダルなどの
表示/非表示を切り替えたりします。
https://note.com/aliz/n/n2f0bc857defb

# v-if

ディレクティブの式が
真の時のみブロックが描写されます！
単一の要素にv-ifをつけます。

```index.vue
<template>
 <div class="page">
   // h1タグの描写をtitleの真偽値で切り替え
   <h1 v-if="title">
    titleがtrueの時のみ表示
   </h1>
 </div>
</template>

<script>
export default {
 data () {
   return {
     // trueなので描写
     title: true,
   }
 },
}
</script>
```

**【表示】**

**🌷true🌷**
h1タグが描写されます。
<img width="858" alt="スクリーンショット 2020-05-26 16.50.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/caa841c2-01b5-74de-3c8d-42159dad6542.png">

**🌷false🌷**
title: falseにした場合
h1タグが描写されません。
<img width="849" alt="スクリーンショット 2020-05-26 16.50.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/13486eb2-4958-4db5-7233-717306078985.png">

**💡 ! を使うと…**
　真偽値を逆にすることができます！

```index.vue
<template>
 <div class="page">
   // titleがfalseですが!で逆にするのでtrueになり描写されます
   <h1 v-if="!title">
    titleがtrueの時のみ表示
   </h1>
 </div>
</template>

<script>
export default {
 data () {
   return {
     title: false,
   }
 },
}
</script>
```

**💡複数の要素を
　切り替えたい場合**
　→親要素にv-ifをつけてあげます🌟

```index.vue
<template>
 <div class="page">
   <p>親要素ごと描写が切り替わる</p>
   <div v-if="titles">
     <h1>
       Hello Nuxt.js!
     </h1>
     <h2>
       Hello Nuxt.js!
     </h2>
     <h3>
       Hello Nuxt.js!
     </h3>
   </div>
 </div>
</template>

<script>
export default {
 data () {
   return {
     titles: false,
   }
 },
}
</script>
```

**【表示】**
<img width="854" alt="スクリーンショット 2020-05-26 17.17.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/38bcb968-d95a-7de2-c410-5fdf1350a766.png">

# v-else

v-if="true"：v-ifのみ描写
v-if="false"：v-elseのみ描写

v-ifとセットで使います！
v-elseはv-ifもしくはv-else-ifの
直後に書きましょう！
それ以外は認識されません👀💦

```index.vue
<template>
 <div class="page">
   <h1 v-if="title">
     Hello Nuxt.js!
   </h1>
   // titleがfalseのためv-elseが描写
   <h1 v-else>
     v-ifがfalseの場合に表示
   </h1>
 </div>
</template>

<script>
export default {
 data () {
   return {
     title: false,
   }
 },
}
</script>
```

**💡v-ifに直接関数を入れてみましょう**
　Math.random()で
　0〜1の数字をランダムで作り
　0.5より上ならv-ifがtrueとなります。
　より、なので0.5は含みません。
　数字は確認したいので
　Mustache構文(二重中括弧)で
　表示させておきます👀

```index.vue
<template>
 <div class="page">
   {{ Math.random() }}
   <h1 v-if="Math.random() > 0.5">
     Hello Nuxt.js!
   </h1>
   <h1 v-else>
     v-ifがfalseの場合に表示
   </h1>
 </div>
</template>

<script>
export default {
}
</script>
```

**【表示】**

**🌷true🌷**
<img width="859" alt="スクリーンショット 2020-05-26 17.45.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/cc8be8f5-2e9a-c478-a733-71e43de48732.png">

**🌷false🌷**
<img width="851" alt="スクリーンショット 2020-05-26 17.44.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/cca302b4-834a-fc06-709e-4e0db903fec5.png">

# v-else-if

複数の条件を指定したい時に使います🌟
こちらもv-ifもしくはv-else-ifの
直後に書きましょう！

```index.vue
<template>
 <div class="page">
   <h1 v-if="type === 'A'">
     A
   </h1>
   <h1 v-else-if="type === 'B'">
     B
   </h1>
   <h1 v-else-if="type === 'C'">
     C
   </h1>
   <p v-else>
     ABCどれにも当てはまりません
   </p>
 </div>
</template>

<script>
export default {
 data () {
   return {
     type: 'E'
   }
 },
}
</script>
```

# keyによる再利用可能な要素の制御

効率的に描写するために
要素を再利用することがよくあります。
例えばこちらのコード。
v-ifとv-elseでinputを分けています🌟
toggleボタンでinputを切り替えます🍒

```index.vue
<template>
 <div class="page">
   <label v-if="loginType === 'username'">
     Username
     <input placeholder="Enter your username">
   </label>
   <label v-else>
     Email
     <input placeholder="Enter your email address">
   </label>
   <button
     @click="toggle"
   >
     toggle
   </button>
 </div>
</template>

<script>
export default {
 data () {
   return {
     loginType: 'username'
   }
 },
 methods: {
   toggle () {
     if (this.loginType === 'username') {
       this.loginType = 'email'
     } else {
       this.loginType = 'username'
     }
   },
 },
}
</script>
```

**【表示】**
toggleを押しても
inputに入力したものが残ってます。
切り替えができていません。
placeholderは変わっていますが、
input自体が再利用されています🤔
この場合の再利用は
望ましくありません💡
![input.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/b7e2465a-b113-204d-e812-85dd19357b92.gif)

**【key属性】**
そこでkey属性の出番！
Vueで使える特別な属性のことです🌸
これを追加することで
「別物だよ！再利用しないでね！」
と伝えることができます🤗

```index.vue
<template>
 <div class="page">
   <label
     v-if="loginType === 'username'"
   >Username
     <input
       placeholder="Enter your username"
       // inputにkey属性を追加
       key="username-input"
     >
   </label>
   <label v-else>Email
     <input
       placeholder="Enter your email address"
       // inputにkey属性を追加
       key="email-input"
     >
   </label>
   <button
     @click="toggle"
   >
     toggle
   </button>
 </div>
</template>

<script>
export default {
 data () {
   return {
     loginType: 'username'
   }
 },
 methods: {
   toggle () {
     if (this.loginType === 'username') {
       this.loginType = 'email'
     } else {
       this.loginType = 'username'
     }
   },
 },
}
</script>
```

**【表示】**
![input2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/8e4b059d-0396-99b8-8324-543e2c9f1e66.gif)

inputが最初から
描写されていますね✨👀
※ inputはkey属性を持ちますが
　labelにはないため
　labelは再描写されています！

**記事が公開したときにわかる様、
フォローをお願いします😀💕**
https://twitter.com/aLizlab