Как реализовать условный рендеринг в Vue.js

Vue.js — это популярная среда JavaScript, которая упрощает создание динамических веб-приложений. Vue.js может отображать контент на основе данных и событий. Это особенно полезно для создания отзывчивых и интерактивных пользовательских интерфейсов.

Узнайте, что такое директивы Vue и как их использовать для условного рендеринга в Vue.js.

Что такое директивы Vue?

Директивы Vue позволяют улучшить поведение HTML-элементов в шаблонах Vue.js, добавляя к ним уникальные атрибуты.

Директивы являются фундаментальной частью Vue.js и предоставляют простой и мощный способ управления Объектная модель документа (DOM), добавлять динамическое поведение к элементам и управлять данными.

Кроме того, Vue.js позволяет создавать настраиваемые директивы, что позволяет легко создавать повторно используемые функции для приложений Vue.

Фреймворк Vue ставит перед своими директивами префикс "в-" перед названием директивы. Примеры часто используемых директив в Vue включают: v-на, v-связать, v-для, и v-если.

Что такое условный рендеринг?

Условный рендеринг позволяет отображать или скрывать элементы в зависимости от заданных вами условий. Например, вы можете использовать условный рендеринг, чтобы показывать сообщение пользователям, только если они ввели действительный адрес электронной почты.

В Vue.js вы можете использовать такие директивы, как v-если и v-шоу для достижения условного рендеринга в вашем приложении, отличного от того, как вы отображать контент условно в React.js.

Достижение условного рендеринга с помощью директивы v-if

Похожий на JavaScript если еще заявление, v-если директива в Vue.js содержит условие. Если это не выполняется, Vue.js оценивает следующее условие, указанное в v-иначе директива и продолжает делать это до тех пор, пока либо не выполнит условие, либо не оценит все условия.

Эта директива позволяет условно отображать элемент на основе логического значения. Компилятор Vue.js не будет отображать часть, если ее значение равно false.

Вот пример условного рендеринга контента с помощью v-если:

HTML>
<HTMLязык="ан">
<голова>
<заголовок>Документзаголовок>
<сценарийисточник=" https://unpkg.com/vue@3/dist/vue.global.js">сценарий>
голова>
<тело>
<дивидентификатор="приложение">
<h1v-если='ЛОЖЬ' >{{ сообщение1 }}h1>
<h1v-иначе >{{ сообщение2 }}h1>
див>
<сценарий>
 константное приложение = Vue.createApp({
 данные () {
 возвращаться {
 message1: 'Это ваше приложение Vue.',
 message2: «Еще не приложение Vue».
 }
 }
 })
 app.mount('#приложение')
сценарий>
тело>
HTML>

В приведенном выше блоке кода показано приложение Vue, созданное путем добавления Сеть доставки контента (CDN) ссылка на тело вашего HTML-файла. Директива v-if отобразит элемент h1, только если его условие истинно.

В приложениях Vue бывают ситуации, когда вам нужно отобразить компонент на основе определенных динамических критериев. Это полезно в таких сценариях, как отображение информации только тогда, когда пользователь нажимает кнопку, или отображение индикатора загрузки во время загрузки данных из API.

Например:

HTML>
<HTMLязык="ан">
<голова>
<заголовок>Vue-приложениезаголовок>
<сценарийисточник=" https://unpkg.com/vue@3/dist/vue.global.js">сценарий>
голова>
<тело>
<дивидентификатор="приложение">
<дивv-если="показать пользователей">
<ул>
<ли>Пользователь1ли>
<ли>Пользователь2ли>
ул>
див>
<кнопкаv-на: нажмите="переключитьПоказатьПользователей()">
 Переключить пользователей
кнопка>
<h1>{{ сообщение }}h1>
див>
<сценарий>
 константное приложение = Vue.createApp({
 данные () {
 возвращаться {
 showUsers: правда,
 сообщение: «Это ваше приложение Vue».
 }
 },
 методы: {
 toggleShowUsers () {
 это.showUsers = !это.showUsers
 }
 }
 })
 app.mount('#приложение')
сценарий>
тело>
HTML>

В приведенном выше блоке кода используется v-если директива для условного отображения содержимого на основе значения логической переменной, showUsers.

див элемент отображается, если значение истинный и скрыто, если это ЛОЖЬ. Нажав на Переключить пользователей кнопка запускает toggleShowUsers() способ изменить значение showUsers.

В этом примере также используется v-на директива для прослушивания событий, таких как событие нажатия на кнопку. Он повторно оценивает v-если директива всякий раз, когда значение showUsers изменения.

Достижение условного рендеринга с помощью директивы v-show

v-шоу директива — это еще один способ показать или скрыть элементы в Vue.js условно. Это похоже на v-если директива в том, что она может отображать элементы на основе логического выражения. Однако между двумя директивами есть некоторые важные различия.

v-шоу директива не удаляет элемент из DOM, когда выражение оценивается как ложное. Вместо этого он использует CSS для переключения отображать имущество между никто и его первоначальное значение.

Это означает, что элемент все еще присутствует в DOM, но не виден, когда выражение ложно.

Вот пример:

<тело>
<дивидентификатор="приложение">
<дивv-если="показать пользователей">
<ул>
<ли>Пользователь1ли>
<ли>Пользователь2ли>
ул>
див>
<кнопкаv-на: нажмите="переключитьПоказатьПользователей()">
 Переключить пользователей
кнопка>
<h1v-шоу="показать пользователей">{{ сообщение }}h1>
див>
<сценарий>
 константное приложение = Vue.createApp({
 данные () {
 возвращаться {
 showUsers: правда,
 сообщение: «Это пользователи приложения Vue»
 }
 },
 методы: {
 toggleShowUsers () {
 это.showUsers = !это.showUsers
 }
 }
 })
 app.mount('#приложение')
сценарий>
тело>

В приведенном выше блоке кода используется v-шоу директива для отображения сообщения о том, ‘Это пользователи приложения Vue». каждый раз, когда вы нажимаете кнопку переключения.

Выбор между v-if и v-show

При выборе между использованием v-если и v-шоу директивы для условного отображения или скрытия элементов в Vue.js, необходимо учитывать несколько важных факторов.

Когда состояние редко меняется, с помощью v-если директива хорошая. Это потому что v-если удаляет элемент из DOM, когда условие ложно, что может помешать оптимальной производительности. Элемент визуализируется только тогда, когда условие становится истинным, и удаляется из DOM, когда условие снова становится ложным.

С другой стороны, если условие может часто меняться, лучше использовать v-шоу директива, улучшающая производительность. Это потому что v-шоу использует CSS, чтобы скрыть или показать элемент, переключая свойство отображения CSS между none и block, оставляя элемент всегда отображаемым в DOM.

Условный рендеринг в вашем приложении Vue стал проще

Вы научились отображать контент условно в приложениях Vue с помощью директив v-if и v-show. Используя эти директивы, вы можете быстро отображать контент в зависимости от различных условий, что дает вам больший контроль над внешним видом и поведением ваших компонентов Vue.