Директива v-else-if в Vue3
Встроенные директивы Vue3v-else-ifЭта директива используется для представления блока else if директивы v-if и может быть объединена в цепочку для формирования многовариантных условий.
Базовое описание
v-else-ifДиректива должна идти сразу после элемента с v-if или другим v-else-if и представляет собой ещё одну проверку условия, когда предыдущее условие не выполнено.
- Ожидаемый тип: any
- Функция: Представляет блок else if директивы v-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>
Другие расширения