【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タグが描写されます。

🌷false🌷
title: falseにした場合
h1タグが描写されません。

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

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>

【表示】

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🌷

🌷false🌷

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自体が再利用されています🤔
この場合の再利用は
望ましくありません💡

【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>

【表示】

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

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