Условный рендеринг в Vue

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, вы можете ознакомиться с другими моими статьями здесь.

Также опубликовано здесь