Vue3 v-else-if Directive
Vue3 Built-in Directivesv-else-ifThis directive is used to represent the else if block of v-if, and can be chained to form multi-condition judgments.
Basic Description
v-else-ifThe directive must immediately follow a v-if or another v-else-if element, representing another condition judgment when the previous condition is not met.
- Expected Type: any
- Function: Represents the else if block of v-if, must be preceded by v-if or v-else-if. Can be chained.
Basic Usage
Example
<template>
<div>
<div v-if="type === 'A'">Type A</div>
<div v-else-if="type === 'B'">Type B</div>
<div v-else-if="type === 'C'">Type C</div>
<div v-else>Other Types</div>
</div>
</template>
<script>
export default {
data() {
return { type: 'B' }
}
}
</script>
<div>
<div v-if="type === 'A'">Type A</div>
<div v-else-if="type === 'B'">Type B</div>
<div v-else-if="type === 'C'">Type C</div>
<div v-else>Other Types</div>
</div>
</template>
<script>
export default {
data() {
return { type: 'B' }
}
}
</script>
Other Extensions