Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@aLiz

【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タグが描写されます。
スクリーンショット 2020-05-26 16.50.15.png

🌷false🌷
title: falseにした場合
h1タグが描写されません。
スクリーンショット 2020-05-26 16.50.59.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>

【表示】
スクリーンショット 2020-05-26 17.17.01.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🌷
スクリーンショット 2020-05-26 17.45.52.png

🌷false🌷
スクリーンショット 2020-05-26 17.44.58.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

【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

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

記事が公開したときにわかる様、
フォローをお願いします😀💕

https://twitter.com/aLizlab

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
aLiz
★WPヘ移行しました★「ITで関わる人にワクワクを届ける」 aLizの公式アカウントです。 Vue.js/Nuxt.jsのあれこれを発信中! ご感想やご意見をいただけると嬉しいです。 ご意見にはできるだけ反応します。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?