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>