Мы приближаемся к концу этой серии статей об основах Vue.js. Я надеюсь, что к настоящему времени вы хорошо поработали с фреймворком и открыли для себя красоту Vue.js. Если вы следили за сериалом с самого начала, продолжайте, хлопайте в ладоши, ваша поддержка дает мне отличный моральный заряд на предстоящую неделю! Давай продолжим.

Для условного рендеринга блоков DOM мы используем директиву v-if. Блок будет отображаться только в том случае, если выражение, содержащееся в директиве, истинно. С «если» приходит «иначе»; Директива v-else, объявленная в блоке, будет отображаться иначе. Пример:

<div v-if=”Math.random() > 0.5">
  The expression is true
</div>
<div v-else>
  The expression is false
</div>

Важно отметить, что директива v-else должна следовать непосредственно за директивой v-if, иначе она не будет распознана.

Мы можем продолжить цепочку условий, используя директиву v-if-else. Это так просто!

<div v-if=”type === ‘string’”>
  I'm a string
</div>
<div v-else-if=”type === ‘number’”>
  I'm a number
</div>
<div v-else-if=”type === ‘object’”>
  I'm an object (could also be an array I guess)
</div>
<div v-else>
  I'm everything else in between
</div>

Недавно я разрабатывал простую страницу входа/регистрации для своего мобильного приложения. Vue.js позволяет контролировать многократно используемые элементы. Я хотел, чтобы пользователей приветствовала страница входа, но если они не зарегистрировались, одним нажатием кнопки отображалась страница регистрации. Вот очень упрощенный пример

<template v-if=login>
  <label>Login</label>
  <input placeholder=”Enter your username”>
</template>
<template v-else>
  <label>Signup</label>
  <input placeholder=”Create a username”>
</template>

Примечание: переключение между элементами не удалит то, что ввел пользователь. Вы можете использовать это, чтобы предоставить пользователям варианты входа в систему, будь то через имя пользователя или адрес электронной почты.

Другим вариантом условного рендеринга является директива v-show, которая очень похожа на то, что показано выше. Разница в том, что v-show всегда будет отображаться и оставаться в DOM, но CSS будет переключаться. Вы не можете использовать его с «v-else», и он не поддерживается «шаблоном». Вот пример:

<h1 v-show=”ok”>Hello!</h1>

Итак, краткий обзор:

Для истинного условного рендеринга используйте «v-if» вместе с «v-else-if» и «v-else». Это гарантирует, что прослушиватели событий и дочерние компоненты внутри условного блока будут правильно уничтожены и воссозданы при переключении. Однако директива также считается ленивой; если директива изначально ложна, она не будет отображаться до тех пор, пока не станет истинной в первый раз.

Более простой подход — использование «v-show»; элемент всегда будет отображаться независимо от его начального состояния с переключением на основе CCS.

Обратите внимание на следующую запись в разделе «Основы Vue.js», где мы подробно рассмотрим, как Vue.js обрабатывает рендеринг списка.