【Vue.js】v-ifを使って条件分岐を使ってみましょう

今回の記事は、

  • これからVue.jsを始めてみたい
  • Vue.jsで条件分岐を使ってみたい

という方に向けた記事になっています。

なお、Vue.jsの概要や特徴については以下の記事にて詳しく解説していますので、こちらもぜひご覧ください。

おすすめ記事

今回の記事は、 最近よく聞くけど、Vue.jsってなに?これからVue.jsを始めてみたいVue.jsの特徴やメリットが知りたい というお悩みをお持ちの方に向けた記事になっています。 ReactやAngular、そしてV[…]

Vue.jsロゴ

レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


Vue.jsで条件分岐を実装する方法

Vue.jsで条件分岐を実装するには、v-ifディレクティブを使用します。

基本的な使い方としては、truefalseを返す条件式をv-ifの後に設定してあげるだけで大丈夫です。

基本的な使い方

<p v-if="条件式">テストテキスト</p>

それでは実際に簡単な事例を見ながらその挙動を確認していきましょう。

実装コード

<div id="app1">
  <p v-if="display">テストテキスト</p>
  
  <button @click="display=!display">表示を切り替え</button>
</div>

<script>
let app1 = new Vue({
  el: "#app1",
  data: {
    display: true
  }
})
</script>

動作確認用

テストテキスト

上記の例では、displayというdataプロパティを設定(初期値はtrue)し、ボタンをクリックした際にそのdisplayの値がtruefalseに切り替わるよう実装しています。

pタグにv-if="display"という条件が設定されていますが、このdisplayの値がtruefalseに切り替わることによって「テストテキスト」という文字の表示が切り替わるようになっています。

このように、v-ifの後にBoolean値を設定することで、簡単に条件分岐を実装することができます。

v-elseも交えた条件分岐の実装方法

素のJavascriptで条件分岐を実装する際には、else句も使用するかと思いますが、Vue.jsでもそれに相当するv-elseディレクティブを使用することができます。

使い方は簡単で、v-ifを記載しているタグの後ろのタグにv-elseを記載するだけで大丈夫です。

実装コード

<div id="app2">
  <p v-if="display">displayはtrueです。</p>
  <p v-else>displayはfalseです。</p>
  
  <button @click="display=!display">表示を切り替え</button>
</div>

<script>
let app2 = new Vue({
  el: "#app2",
  data: {
    display: true
  }
})
</script>

動作確認用

displayはtrueです。

displayはfalseです。

少し違和感はあるかと思いますが、上記のようにv-ifv-elseを記載することで、簡単に条件分岐を実装することができます。

この他、v-else-if同様の形で使用できますので、機会があれば実践してみてくださいね。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまでVue.jsのv-ifディレクティブを使った条件分岐の方法をご紹介してきましたがいかがでしたか?

基本的な使い方さえマスターしておけば、通常のif ... else ~~ end構文と同じ感覚で使用できるので、特に違和感なく実装していけるかと思います。

Vue.jsの数あるディレクティブの中でも、v-ifは最も頻繁に使用するものになりますので、ぜひこの機会に覚えておいてくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。