Vue3 v-else-if ディレクティブ
Vue3 組み込みディレクティブv-else-ifディレクティブは v-if の else if ブロックを表すために使用され、チェーンで連結して複数条件の判定を形成できます。
基本説明
v-else-ifディレクティブは v-if または別の v-else-if 要素の直後に置く必要があり、前の条件が満たされない場合の別の条件判定を表します。
- 期待される型: any
- 機能: v-if の else if ブロックを表します。前には v-if または v-else-if が必要です。チェーンで連結して使用できます。
基本的な使い方
例
<template>
<div>
<div v-if="type === 'A'">タイプA</div>
<div v-else-if="type === 'B'">タイプB</div>
<div v-else-if="type === 'C'">タイプC</div>
<div v-else>その他のタイプ</div>
</div>
</template>
<script>
export default {
data() {
return { type: 'B' }
}
}
</script>
<div>
<div v-if="type === 'A'">タイプA</div>
<div v-else-if="type === 'B'">タイプB</div>
<div v-else-if="type === 'C'">タイプC</div>
<div v-else>その他のタイプ</div>
</div>
</template>
<script>
export default {
data() {
return { type: 'B' }
}
}
</script>
その他の拡張