Директива v-if в Vue3
Встроенные директивы Vue3v-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>
Другие расширения