Изучите Vue: список и условный рендеринг.
Представьте, что вы разрабатываете приложение и хотите отобразить некоторые данные в браузере на основе определенных условий или у вас есть массив данных, которые вы хотите просмотреть и отобразить в браузере. Как мы можем добиться этого в Vue? В этом руководстве мы изучим List rendering и conditional rendering в Vue, а также то, как мы можем использовать возможности директив v-if и v-for.
Рендеринг списка
Директива v-for используется для отображения массива элементов или объекта. Синтаксис очень прост и удобен; item in items, где элемент — это отдельный item, который будет отображаться, а items — это список, который мы прокручиваем.
Рендеринг массива с v-for
v-for также можно использовать для итерации по объекту, последовательность итераций будет зависеть от результата вызова Object.keys() для объекта:
//template
<ul>
<li v-for="value in myObject">
{{ value }}
</li>
</ul>
//script
const myObject = reactive({
title: 'How to render lists in Vue',
author: 'KingstonCodes',
publishedAt: '2023-08-10'
})При желании мы также можем включить ключ каждого свойства в объект <li v-for="(value, key) in myObject"> {{ value }} </li>
v-for и key
Чтобы сохранить состояние элементов при их отображении в браузере, мы можем ввести уникальный key атрибут для ссылки на каждый элемент в списке:
<div v-for="item in items" :key="item.id">
{{ item }}
</div>Директива v-for чрезвычайно важна, так как она помогает нам легко отображать списки в браузере.
Условный рендеринг
Мы можем отобразить что угодно в браузере условно, используя либо директиву v-show, либо директиву v-if. И v-show, и v-if могут использоваться для достижения одного и того же результата, разница в том, что директива v-show только переключает свойство CSS display элемента, поэтому элемент с директивой v-show всегда будет присутствовать в браузер.
v-show
Давайте посмотрим на пример условного рендеринга с директивой v-show.
<div v-show="isTrue">
//content here
</div>
//script
const isTrue = ref(true)Div всегда будет отображаться в браузере до тех пор, пока isTrue остается истинным, и аналогичным образом, когда isTrue имеет значение false, div исчезает из браузера.
v-if
Как и директива v-show, директива v-if также используется для условного рендеринга элементов в браузере, элемент визуализируется только тогда, когда выражение директивы возвращает истинное значение.
<div v-if="isTrue">
//content here
</div>
//script
const isTrue = ref(true)Еще одно различие между директивой v-if и директивой v-show заключается в том, что мы можем использовать директивы v-else и v-else-if для соответствия случаям, когда выражение директивы неверно.
v-if с v-else и v-else-if
<div v-if="isTrue < 0">
//display content here
</div>
<div v-else-if="isTrue > 0">
//display content here
</div>
<div v-else>
//display content here
</div>
//script
const isTrue = ref(0)Как и традиционные if, else if и else в JavaScript, v-if, v-else и v-else-if можно использовать для достижения аналогичного результата.
В приведенном выше примере будет запущен блок v-else, поскольку isTrue не меньше и не больше нуля. Точно так же блок v-if или блок v-else-if будет работать в зависимости от того, является ли значение isTrue больше или меньше 0.
v-for с v-if
Иногда мы можем захотеть отобразить список в браузере при выполнении определенных условий. Для этого нам нужно сначала пройтись по списку с помощью v-for, а затем проверить, выполняется ли условие с помощью v-if перед его отображением.
Проблема в том, что не рекомендуется использовать директивы v-for и v-if для одного и того же элемента, потому что, когда они существуют в одном и том же элементе, v-if будет иметь более высокий уровень приоритета, чем v-for, что означает что v-if не сможет получить доступ к переменной из блока v-for.
<!--
This will not work
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo.name }}
</li>Чтобы исправить это, давайте переместим директиву v-for в тег-оболочку.
<template v-for="todo in todos">
<li v-if="!todo.isComplete">
{{ todo.name }}
</li>
</template>И все, блок v-for всегда будет выполняться перед блоком v-if, тем самым разрешая директиве v-if доступ к переменной v-for и выполнение действия.
