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

今回の記事は、

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

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

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

おすすめ記事

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

Vue.jsロゴ

フリーランス案件を探すならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社Hajimari
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約28,000件 約3,300件 約4,200件
平均単価 68.2万円 72.2万円
最高月収 145万円 200万円 176万円
支払いサイト 15日(月末締め翌月15日支払い) 20日
手数料(中間マージン) 非公開 非公開
※実質20%
非公開
特徴高単価な案件が多い
福利厚生サービスが受けられる
・首都圏の案件が中心
給与保証制度で安定した収入を得られる
・税務処理のサポートあり
・マージン率は実質20%
週2/週3の案件が多い
在宅/リモート案件が多い
・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例 ・株式会社Gunosy
・株式会社バンダイナムコホールディングス
・株式会社ユーザベース
・Sansan株式会社
・株式会社一休
・株式会社FiNC Technologies など
・クックパッド株式会社
・株式会社カオナビ
・株式会社Kaizen Platform など
説明記事
公式サイト


転職を考えているならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社リブセンス
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約13,000件 約800件
※非公開求人が多い

※ドラフト制のため、対象外
年齢層 20代:◎
30代:〇
40代:〇
20代:〇
30代:〇
40代:△
20代:〇
30代:〇
40代:〇
特徴エンジニア・デザイナーを専門としている
・カウンセリングに時間をかける
年収アップ率60%の実績
IT/Web/ゲーム業界専門の転職エージェント
・業界経験者がキャリアコンサルタントを務める
・丁寧なカウンセリングで入社後の離職率1%以下を実現
ドラフト制による採用を叶える特殊なサービス
スキル・経験重視で評価してもらえる
・他エンジニアの入札結果を見ることで
自分の市場価値が分かる
紹介企業例 ・サイボウズ株式会社
・株式会社サイバーエージェント
・Chatwork株式会社 など
・DMM.com
・Money Forward
・SmartHR など
・メルカリ
・ZOZOテクノロジーズ
・freee など
説明記事
公式サイト



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は最も頻繁に使用するものになりますので、ぜひこの機会に覚えておいてくださいね。

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

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