Vue.jsは、フロントエンド開発者にとって非常に強力で柔軟なフレームワークです。その中でも、v-ifディレクティブは、条件付きで要素を表示・非表示にするために非常に役立ちます。本記事では、v-ifの基本的な使い方から、複数の条件分岐、ネストされた条件分岐までを詳しく解説します。
基本的な使い方
まずは、v-ifの基本的な使い方を見てみましょう。以下の例では、ボタンをクリックすることでテキストの表示・非表示を切り替えています。
<div id="app">
<p v-if="isVisible">このテキストは表示されます</p>
<button @click="toggleVisibility">表示/非表示を切り替える</button>
</div>new Vue({
el: '#app',
data: {
isVisible: true
},
methods: {
toggleVisibility() {
this.isVisible = !this.isVisible;
}
}
});複数の条件分岐
次に、複数の条件分岐が必要な場合の使い方を見てみましょう。v-else-ifやv-elseを使用することで、条件に応じた異なる要素を表示できます。
<div id="app">
<p v-if="status === 'success'">成功しました！</p>
<p v-else-if="status === 'error'">エラーが発生しました。</p>
<p v-else>ステータスが不明です。</p>
<button @click="setStatus('success')">成功</button>
<button @click="setStatus('error')">エラー</button>
<button @click="setStatus('unknown')">不明</button>
</div>new Vue({
el: '#app',
data: {
status: 'unknown'
},
methods: {
setStatus(newStatus) {
this.status = newStatus;
}
}
});ネストされた条件分岐
最後に、ネストされた条件分岐の例を紹介します。ネストされたv-ifを使用することで、より複雑な条件分岐を実現できます。
<div id="app">
<div v-if="user">
<p>ようこそ、{{ user.name }}さん！</p>
<p v-if="user.isAdmin">管理者としてログインしています。</p>
</div>
<p v-else>ログインしてください。</p>
<button @click="login">ログイン</button>
<button @click="logout">ログアウト</button>
</div>new Vue({
el: '#app',
data: {
user: null
},
methods: {
login() {
this.user = { name: 'ユーザー名', isAdmin: true };
},
logout() {
this.user = null;
}
}
});まとめ
Vue.jsのv-ifディレクティブを使用すると、簡単に条件付きで要素を表示・非表示にすることができます。基本的な使い方から複数の条件分岐、ネストされた条件分岐まで、様々な状況に対応可能です。これを活用して、より動的でインタラクティブなVue.jsアプリケーションを作成しましょう。
