Введение в рендеринг списка в Vue

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

Что такое директива v-for в Vue?

v-для Директива — это одна из директив Vue, позволяющая отображать списки с минимальным кодом JavaScript. v-для директива работает аналогично for цикл в JavaScript и может перебирать массивы и объекты для отображения элементов в списке.

Чтобы использовать v-для укажите массив, который вы хотите перебрать в данные собственность Объект параметров в Vue.

Например:

<шаблон>
<ул>
<лиv-для="имя в именах">{{ имя }}ли>
ул>
шаблон>
<сценарий>
экспорт по умолчанию {
 данные() {
 возвращаться {
 имена: ['Джон', 'Доу', 'Джеймс'],
 };
 },
};
сценарий>

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

v-для имеет значение, равное выражению, состоящему из двух частей: переменной итерации (имя) и имена множество v-для указывает на. Переменная итерации содержит каждый имя в имена массив и отображает имя.

Vue создает новый Объектная модель документа (DOM) элемент для каждого имя в имена массив и отображает его на веб-странице.

Если имена изменения массива (например, добавлено новое имя или удалено старое), Vue автоматически обновит виртуальный DOM и повторно отобразит список, чтобы отразить обновленные данные.

Vue также предлагает способ получить индекс элемента в списке.

<лиv-для="(имя, индекс) в именах">{{имя}} -- {{индекс}}ли>

В приведенном выше коде показан синтаксис для отображения индекса каждого имя в имена множество.

Вы также можете использовать v-для директива для перебора диапазона чисел:

<лиv-для="Число в 10">Вью хорошли>

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

Как удалить элементы из списка в Vue

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

Вы можете использовать соединение Метод JavaScript (это один из способов удаление элементов из массивов), чтобы удалить элемент из списка в Vue.

array.splice(startIndex, numToRemove, newElements)

Метод splice может добавлять или удалять элементы из массива. Метод splice принимает параметры в следующем порядке:

1. начальный индекс Параметр задает индекс, с которого начинается изменение массива.
2. numToRemove указывает количество элементов, которые вы хотите удалить из массива.
3. Наконец, новые элементы параметр, который можно использовать для добавления элементов в массив. Если элементы не указаны, соединение () удалит только элементы из массива.

Чтобы использовать метод splice для удаления элемента из списка в Vue, вам нужно знать индекс этого элемента. Один из способов добиться этого — пройти индекс в качестве аргумента метода, который обрабатывает удаление элемента.

Например, вы можете добавить кнопку рядом с каждым именем в массиве, которая запускает метод для удаления элемента, когда пользователь нажимает на него:

<шаблон>
<ул>
<лиv-для="(имя, индекс) в именах">
 {{имя}} -- {{индекс}}
<кнопка @нажмите="удалитьItem (индекс)">Удалятькнопка>
ли>
ул>
шаблон>

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

<сценарий>
экспорт по умолчанию {
 данные() {
 возвращаться {
 имена: ['Джон', 'Доу', 'Джеймс'],
 };
 },
 методы: {
 удалитьItem (индекс) {
 this.names.splice (индекс, 1);
 }
}
};
сценарий>

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

Как визуализировать списки с ключами в Vue

ключ атрибут — это уникальный атрибут, который Vue использует для отслеживания идентичности каждого элемента в списке. При изменении элемента в списке с помощью ключ атрибут Vue может быстро обновить DOM без повторного рендеринга всего списка.

Давайте рассмотрим пример рендеринга списка с ключами в Vue:

<шаблон>
<див>
<ул>
<лиv-для="имя в именах":ключ="имя.id">
 {{имя.имя}}
<кнопка @нажмите="удалитьItem (имя.id)">Удалятькнопка>
ли>
ул>
див>
шаблон>
<сценарий>
экспорт по умолчанию {
 данные() {
 возвращаться {
 имена: [
 {id: 1, имя: "Джон"},
 {id: 2, имя: "Доу"},
 {id: 3, имя: "Джеймс"},
 ],
 };
 },
 методы: {
 removeItem (ключ) {
 this.names.splice (ключ — 1, 1);
 },
 },
};
сценарий>

В этом примере у вас есть список элементов с уникальными идентификатор характеристики. Блок кода использует ключ атрибут с v-для директива для отслеживания идентичности каждого элемента в списке. Это позволяет Vue эффективно обновлять DOM при изменении списка.

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

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

Используя ключ атрибут с v-для директива помогает избежать проблем с рендерингом. Например, при удалении имен Vue использует ключ атрибут для поддержания порядка элементов в списке.

Директивы Vue необходимы

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

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