Мы приближаемся к концу этой серии статей об основах 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 обрабатывает рендеринг списка.