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

前置き

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

どんな時に使うの？

表示/非表示の切り替えに使います！
buttonをclickしてモーダルなどの
表示/非表示を切り替えたりします。
#【Nuxt.js】$emit実践編：モーダルウィンドウを操作しよう

v-if

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

普通の使い方

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

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

// h1タグの描写をtitleの真偽値で切り替え

titleがtrueの時のみ表示

</h1>

</div>

</template>

export default {

data () {

return {

// trueなので描写

title: true,

}

</script>

表示

true

h1タグが描写されます

false

h1タグが描写されません

真偽値を逆にした使い方

!を使って
真偽値を逆にすることができます！

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

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

// titleがfalseですが!で逆にするのでtrueになり描写されます

titleがtrueの時のみ表示

</h1>

</div>

</template>

export default {

data () {

return {

title: false,

}

</script>

複数の要素を切り替える使い方

親要素にv-ifをつけてあげます🌟

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

<p>親要素ごと描写が切り替わる</p>

<h1>

Hello Nuxt.js!

</h1>

<h2>

Hello Nuxt.js!

</h2>

<h3>

Hello Nuxt.js!

</h3>

</div>

</template>

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の
直後に書きましょう！
それ以外は認識されません👀💦

普通の使い方

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

Hello Nuxt.js!

</h1>

// titleがfalseのためv-elseが描写

v-ifがfalseの場合に表示

</h1>

</div>

</template>

export default {

data () {

return {

title: false,

}

</script>

v-ifに関数を入れた使い方

・Math.random()
　0〜1の数字をランダムで作り
　0.5「より」上ならv-ifがtrueとなります。
　「より」なので0.5は含みません。
・{{ Math.random() }}
　Mustache構文(二重中括弧)
　数字を確認したいので
　表示させておきます👀

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

Hello Nuxt.js!

</h1>

v-ifがfalseの場合に表示

</h1>

</div>

</template>

export default {

}

</script>

表示

true

false

v-else-if

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

普通の使い方

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

</h1>

</h1>

</h1>

ABCどれにも当てはまりません

</p>

</div>

</template>

export default {

data () {

return {

type: 'E'

}

</script>

表示

type: 'E'は
v-else-ifのどれにも当てはまらないため
「ABCどれにも当てはまりません」
が表示されます！

要素の再利用と制御

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

再利用可能な要素

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

Username

</label>

</label>

<button

@click="toggle"

toggle

</button>

</div>

</template>

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で使える特別な属性のことです🌸
これを追加することで
「別物だよ！再利用しないでね！」
と伝えることができます🤗

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

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

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は再描写されています！

まとめ

1つの要素を表示/非表示する場合はv-if
2つの要素で切り替える場合はv-if, v-else
3つ以上の要素ならv-if, v-else-if, v-else