今回の記事は、
- これからVue.jsを始めてみたい
- Vue.jsで条件分岐を使ってみたい
という方に向けた記事になっています。
なお、Vue.jsの概要や特徴については以下の記事にて詳しく解説していますので、こちらもぜひご覧ください。
今回の記事は、 最近よく聞くけど、Vue.jsってなに?これからVue.jsを始めてみたいVue.jsの特徴やメリットが知りたい というお悩みをお持ちの方に向けた記事になっています。 ReactやAngular、そしてV[…]
フリーランス案件を探すならこのエージェント!
転職を考えているならこのエージェント!
Vue.jsで条件分岐を実装する方法
Vue.jsで条件分岐を実装するには、v-ifディレクティブを使用します。
基本的な使い方としては、true
やfalse
を返す条件式を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
の値がtrue
とfalse
に切り替わるよう実装しています。
pタグにv-if="display"
という条件が設定されていますが、このdisplay
の値がtrue
とfalse
に切り替わることによって「テストテキスト」という文字の表示が切り替わるようになっています。
このように、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-if
とv-else
を記載することで、簡単に条件分岐を実装することができます。
この他、v-else-if
も同様の形で使用できますので、機会があれば実践してみてくださいね。
お仕事の途中ですが、少し一休みして、転職や独立について考えてみませんか🙌?
現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】
レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】
MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】
日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲
最後に
さて、ここまでVue.jsのv-ifディレクティブを使った条件分岐の方法をご紹介してきましたがいかがでしたか?
基本的な使い方さえマスターしておけば、通常のif ... else ~~ end
構文と同じ感覚で使用できるので、特に違和感なく実装していけるかと思います。
Vue.jsの数あるディレクティブの中でも、v-if
は最も頻繁に使用するものになりますので、ぜひこの機会に覚えておいてくださいね。
このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。