Условный рендеринг в Vue
8 февраля 2023 г.v-if и v-show — это два способа условного рендеринга контента в Vue. Оба созданы для условного рендеринга контента в Vue, но немного по-разному, что может сбивать с толку. Давайте посмотрим, как они работают и когда вы будете использовать каждый из них.
v-if vs v-show
v-if в условном рендеринге — это тот, который вы будете использовать большую часть времени. Это связано с тем, что способ работы v-if заключается в полном исключении элементов DOM, если условие внутри него возвращает false. Например, ниже мы попытаемся отобразить тег <h1>, но только если msg равен 5. В приведенном ниже примере msg не равно 5, поэтому <h1> никогда не будет отображаться: n
<script setup>
const msg = 6
</script>
<template>
<h1 v-if="msg === 5">Hello World!</h1>
</template>
Если бы мы сделали msg реактивным и обновили его, мы могли бы условно отображать содержимое на основе нажатия кнопки, как в этом коде: n
<script setup>
import { reactive } from 'vue'
const msg = reactive({ setting: true })
function updateMessage() {
if(msg.setting) msg.setting = false
else msg.setting = true
}
</script>
<template>
<h1 v-if="msg.setting === true">Hello World!</h1>
<button @click="updateMessage">
Update Message
</button>
</template>
В большинстве случаев это нормально. Загрузка на один элемент DOM меньше обычно является лучшей идеей и может помочь с некоторыми проблемами со стилем, с которыми вы можете столкнуться. Если вы попытаетесь просмотреть свой код в Inspect Element, вы увидите, что тег <h1>, который мы пытались отобразить, не будет существовать, если v -if возвращает false. Довольно круто, правда?
Однако бывают ситуации, когда требуется визуализация элемента DOM, даже если v-if возвращает false. Например, вы можете захотеть применить какой-нибудь Javascript к вашему элементу DOM, даже если он должен быть скрыт. Для этого вы можете использовать v-show: n
<script setup>
const msg = 6
</script>
<template>
<h1 v-show="msg === 5">Hello World!</h1>
</template>
Разница между v-show и v-if заключается в том, что v-show не удаляет элемент DOM. Если выражение в v-show возвращает false, элемент все равно будет отображаться и существовать в документе, но будет отображаться display: none применяется к нему в CSS.
Другие различия между v-if и v-show
Существуют два других ключевых различия между v-if и v-show:
v-ifможно использовать с элементами<template>, ноv-showнельзя.v-ifтакже поддерживает предложенияv-elseиv-else-if, тогда какv-showнет. Подробнее об этом читайте здесь
Заключение
v-if и v-show имеют свое применение. В то время как v-if остановит отрисовку чего-либо, если выражение внутри него возвращает false, v-show по-прежнему будет отображать элемент, но он применить display: none к элементу.
Чтобы узнать больше о Vue, вы можете ознакомиться с другими моими статьями здесь.
Также опубликовано здесь
Оригинал