Vue3 v-if ディレクティブ
Vue3 組み込みディレクティブv-ifディレクティブは条件付きレンダリングに使用され、式の真偽値に基づいて要素またはテンプレートフラグメントをレンダリングするかどうかを決定します。
基本説明
v-ifディレクティブは、バインドされた式の真偽値に基づいて、要素を条件付きでレンダリングします。条件が真の場合、要素は DOM にレンダリングされます。条件が偽の場合、要素はレンダリングされません。
- 期待される型: any
- 機能: 条件付きレンダリング。式の真偽値に基づいて要素をレンダリングするかどうかを決定します。条件が偽の場合、DOM はレンダリングされません。
基本的な使い方
例
<template>
<div>
<p v-if="isLoggedIn">おかえりなさい、ユーザー</p>
<p v-else>ログインしてください</p>
</div>
</template>
<script>
export default {
data() {
return { isLoggedIn: true }
}
}
</script>
<div>
<p v-if="isLoggedIn">おかえりなさい、ユーザー</p>
<p v-else>ログインしてください</p>
</div>
</template>
<script>
export default {
data() {
return { isLoggedIn: true }
}
}
</script>
v-else と v-else-if との併用
v-if は v-else-if および v-else と組み合わせて使用でき、条件チェーンを形成します：
例
<div v-if="status === 'loading'">読み込み中...</div>
<div v-else-if="status === 'error'">読み込みに失敗しました</div>
<div v-else>内容：{{ data }}</div>
<div v-else-if="status === 'error'">読み込みに失敗しました</div>
<div v-else>内容：{{ data }}</div>
その他の拡張