Vue.jsでは、v-ifやv-showを使って要素を条件分岐し、表示・非表示を簡単に制御することができます。本記事では、これらのディレクティブを活用した実装方法を見ていきます。
v-ifを使った要素の表示・非表示
v-ifディレクティブは、指定した条件がtrueの場合のみ要素を表示し、falseの場合はDOMから完全に削除されます。例えば、以下のコードでは、isVisibleがtrueの場合に要素が表示されます。
<template>
<div>
<p v-if="isVisible">この要素は表示されます</p>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true // trueなら要素が表示される
}
}
}
</script>この方法は、要素を完全に削除する必要がある場合に効果的です。
v-else-ifとv-elseで条件分岐を行う
v-else-ifとv-elseを組み合わせることで、複数の条件をチェックし、異なる要素を表示できます。以下の例では、statusの値に応じて異なるメッセージが表示されます。
<template>
<div>
<p v-if="status === 'success'">成功しました</p>
<p v-else-if="status === 'loading'">読み込み中...</p>
<p v-else>エラーが発生しました</p>
</div>
</template>
<script>
export default {
data() {
return {
status: 'loading' // 状態によって表示されるメッセージが変わる
}
}
}
</script>この方法は、複数の状態を持つアプリケーションで、表示する内容を柔軟に変更したい場合に便利です。
v-showでCSSによる表示・非表示
v-showは、条件に応じて要素のdisplayプロパティを切り替えます。DOMに残しておきたいが、条件により非表示にしたい場合に使われます。
<template>
<div>
<p v-show="isVisible">この要素はCSSで非表示になります</p>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: false // falseの場合、要素は非表示になるがDOMには残る
}
}
}
</script>v-showを使うと、要素の存在は維持しつつ、表示・非表示を効率的に切り替えることができます。
複数条件の分岐
複雑な条件を使って要素を出し分けたい場合には、v-ifやv-else-ifを利用して条件を組み合わせることができます。次の例では、ageに基づいて異なるメッセージを表示します。
<template>
<div>
<p v-if="age < 18">未成年です</p>
<p v-else-if="age >= 18 && age < 65">成人です</p>
<p v-else>高齢者です</p>
</div>
</template>
<script>
export default {
data() {
return {
age: 30 // 年齢に基づいてメッセージが変わる
}
}
}
</script>このように、複数の条件を扱うことで、より複雑なロジックを簡潔に実装できます。
まとめ
Vue.jsの条件分岐を利用することで、柔軟に要素の表示・非表示を制御できます。v-ifは要素を完全に削除する場合に、v-showはCSSで表示・非表示を切り替えたい場合に、それぞれ適しています。また、v-else-ifとv-elseを活用することで、複数の条件に基づいた分岐が可能になります。用途に応じて適切なディレクティブを選び、効率的なコンポーネント設計を目指しましょう。
