Директива v-show Vue3
Встроенные директивы Vue3v-showДиректива используется для переключения видимости элемента на основе истинного/ложного значения выражения. Она управляет отображением и скрытием элемента через CSS-свойство display.
Базовое объяснение
v-showДиректива определяет, отображается ли элемент, на основе истинного/ложного значения связанного выражения. Независимо от того, истинно условие или ложно, элемент рендерится в DOM, а его видимость управляется через CSS.
- Ожидаемый тип: any
- Эффект: переключает видимость элемента на основе истинного/ложного значения выражения, управляется CSS-свойством display.
Разница между v-show и v-if
| Характеристика | v-show | v-if |
|---|---|---|
| Способ рендеринга | Всегда рендерится в DOM, управляет только показом/скрытием | Рендерится, когда условие истинно, не рендерится, когда ложно |
| Производительность переключения | Низкие накладные расходы при переключении (изменяется только CSS) | Высокие накладные расходы при переключении (требуется создание/уничтожение элементов) |
Сценарии использования
1. Частое переключение состояния отображения
Когда элемент нужно часто показывать/скрывать, использование v-show обеспечивает лучшую производительность:
Пример
<template>
<div>
<button @click="showModal = true">Открыть всплывающее окно</button>
<div class="modal" v-show="showModal" @click="showModal = false">
<div class="modal-content" @click.stop>
<p>Это всплывающее окно</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return { showModal: false }
}
}
</script>
<div>
<button @click="showModal = true">Открыть всплывающее окно</button>
<div class="modal" v-show="showModal" @click="showModal = false">
<div class="modal-content" @click.stop>
<p>Это всплывающее окно</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return { showModal: false }
}
}
</script>
Другие расширения