Как перебирать элементы в Vue.js с помощью V-for
Введение
Общим требованием для интерфейсных приложений является перечисление элементов. Он может принимать форму списка дел и карточных систем. Vue.js поддерживает отображение списков элементов в браузере с помощью встроенной основной директивы v-for
.
В этом посте мы рассмотрим, как v-for
можно использовать в приложениях Vue.
Предпосылки
В этом посте предполагается, что у вас есть некоторые знания о циклах, массивах и объектах в JavaScript. Вы можете обратиться к этой серии, если вы начинаете работать с JavaScript.
Это исследование будет основываться на файле HTML, в котором используется размещенная в CDN (сети доставки контента) копия платформы Vue.js:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for</title>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
new Vue({
el: "#app",
data() {
return {
message: "hello"
}
}
});
</script>
</body>
</html>
Вы можете обратиться к этому сообщению, если начинаете работу с Vue.js.
В этот момент, если вы загрузите этот код и просмотрите этот файл в браузере, вы увидите сообщение: hello
.
Использование v-for с диапазоном
Встроенная директива v-for
позволяет нам перебирать элементы в цикле.
Мы можем использовать диапазон в директиве v-for
для повторения заданного количества раз.
Давайте заменим содержимое нашего <div>
ненумерованным списком, который повторяет элементы списка 15 раз:
<div id="app">
<ul>
<li v-for="item in 15">{{ item }}</li>
</ul>
</div>
В результате получится неупорядоченный список с номерами от 1
до 15
.
Использование элемента
Директива v-for
применяется только к элементу, к которому она прикреплена. Если несколько элементов должны повторяться с директивой v-for
, мы должны обернуть элементы в элемент <template>
.
Давайте заменим содержимое нашего <div>
на <template>
:
<div id="app">
<template v-for="item in 15">
<span>{{ item }}</span>
<button>Count</button>
</template>
</div>
Это приведет к набору повторяющихся элементов <span>
и <button>
.
Использование v-for с объектами
Мы можем перебирать значения в объекте objectItems
из модели данных. Этого можно добиться, добавив директиву v-for
в повторяющийся элемент.
Давайте изменим строки в data()
, чтобы он возвращал объект objectItems
:
<script>
new Vue({
el: "#app",
data() {
return {
objectItems: {
key1: 'item1',
key2: 'item2',
key3: 'item3'
}
}
}
});
</script>
Давайте заменим содержимое нашего <div>
ненумерованным списком, который повторяет элементы списка:
<div id="app">
<ul>
<li v-for="item in objectItems">{{ item }}</li>
</ul>
</div>
Вот как все будет выглядеть:
Output<div id="app">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
Это приведет к неупорядоченному списку со значениями свойств объекта.
В дополнение к значению свойства мы получаем два дополнительных параметра при переборе объектов с помощью Vue. А именно, значения key
и index
.
Значение key
дает нам доступ к текущему ключу свойств.
index
предоставляет нам индекс текущего элемента в цикле. Это позиция элемента в циклическом списке.
Давайте заменим содержимое нашего <div>
неупорядоченным списком, который повторяет элементы списка с item
, key
и index
:
<div id="app">
<ul>
<li v-for="(item, key, index) in objectItems">
{{ item }} - {{ key }} - {{ index }}
</li>
</ul>
</div>
Вот как все будет выглядеть:
Output<div id="app">
<ul>
<li>item1 - key1 - 1</li>
<li>item2 - key2 - 2</li>
<li>item3 - key3 - 3</li>
</ul>
</div>
В результате получится неупорядоченный список с item
, key
и index
.
Использование v-for с массивами
Мы можем перебирать элементы в массиве shoppingItems
из модели данных. Этого можно добиться, добавив директиву v-for
в повторяющийся элемент.
Давайте изменим строки в data()
, чтобы он возвращал массив shoppingItems
с объектами:
<script>
new Vue({
el: "#app",
data() {
return {
objectItems: {
key1: 'item1',
key2: 'item2',
key3: 'item3'
},
shoppingItems: [
{ name: 'apple', price: '7' },
{ name: 'orange', price: '12' }
]
}
}
});
</script>
Мы можем перебрать объекты в массиве shoppingItems
и получить доступ к значениям, используя заданный ключ.
Давайте заменим содержимое нашего <div>
ненумерованным списком, который повторяет элементы списка с item.name
и item.price
:
<div id="app">
<ul>
<li v-for="item in shoppingItems">
{{ item.name }} - {{ item.price }}
</li>
</ul>
</div>
Вот как все будет выглядеть:
Output<div id="app">
<ul>
<li>apple - 7</li>
<li>orange - 12</li>
</ul>
</div>
Это приведет к неупорядоченному списку со значениями из массива.
Использование v-bind:key для отслеживания элементов
Когда порядок массива изменяется, по умолчанию Vue изменяет данные в каждом существующем элементе, а не перемещает элементы DOM в обновленную позицию.
Мы можем настроить Vue для отслеживания каждого элемента с помощью ключа. Это заставит его перемещать элементы, а не заменять значения.
Это значение должно быть уникальным для каждого повторяющегося элемента.
Давайте назначим ключ, используя item.name
:
<div id="app">
<ul>
<li v-for="item in shoppingItems" v-bind:key="item.name">
{{ item.name }} - {{ item.price }}
</li>
</ul>
</div>
Теперь у Vue есть способ отслеживать идентичность узла по мере внесения изменений.
Управление изменениями
По умолчанию v-for
поддерживает методы изменения массива. Это push
, pop
, shift
, unshift
, splice
, сортировать
и обратить
. Если какая-либо из этих операций выполняется с массивом, директива v-for
обновляет представление новыми данными.
Кроме того, когда мы заменяем массив новым массивом, Vue находит наиболее оптимальный способ обновления элементов.
Проблемы с управлением изменениями
Две вещи, которые Vue не может отслеживать при изменении в массиве:
- Настройка элементов напрямую.
Пример:
data.shoppingItems[3] = { price: 10, name: 'pineapple' };
Это можно решить с помощью метода Vue.set
. Этот метод принимает массив
, индекс
и новое значение
.
Vue.set(data.shoppingItems, 3, { price: 10, name: 'pineapple' });
Кроме того, мы можем использовать splice
для установки значения по заданному индексу.
<старт=\2\>
Пример:
data.shoppingItems.length = 2;
Мы можем использовать splice
для изменения длины массива вместо того, чтобы устанавливать ее напрямую, чтобы избежать проблем.
Списки фильтрации
Мы можем отфильтровать отображаемые списки, не изменяя исходный список. Это можно сделать с помощью вычисленных
значений или с помощью метода и передачи значений при установке значений v-for
.
Использование вычисляемых значений для фильтрации элементов
Вместо того чтобы задавать значение непосредственно в списке, мы указываем на вычисленное
значение. Мы можем написать логику для фильтрации данных в этой вычисляемой функции.
Во-первых, давайте определим itemsLessThanTen
:
<script>
new Vue({
el: "#app",
data() {
return {
objectItems: {
key1: 'item1',
key2: 'item2',
key3: 'item3'
},
shoppingItems: [
{ name: 'apple', price: '7' },
{ name: 'orange', price: '12' }
]
}
},
computed: {
itemsLessThanTen: function() {
return this.shoppingItems.filter(function(item) {
return item.price < 10;
})
}
}
});
</script>
Затем давайте изменим v-for
, чтобы использовать itemsLessThanTen
:
<div id="app">
<ul>
<li v-for="item in itemsLessThanTen" v-bind:key="item.name">
{{ item.name }} - {{ item.price }}
</li>
</ul>
</div>
Вот как все будет выглядеть:
Output<div id="app">
<ul>
<li>apple - 7</li>
</ul>
</div>
Функция itemLessThanTen
использует функцию JavaScript filter
для возврата любого товара с ценой меньше 10.
Использование метода для фильтрации элементов
При таком подходе мы передаем тот же список shoppingItems
непосредственно в определяемый нами метод. Таким образом, все элементы массива будут отфильтрованы в соответствии с определением метода.
Во-первых, давайте определим filterItems
:
<script>
new Vue({
el: "#app",
data() {
return {
objectItems: {
key1: 'item1',
key2: 'item2',
key3: 'item3'
},
shoppingItems: [
{ name: 'apple', price: '7' },
{ name: 'orange', price: '12' }
]
}
},
computed: {
itemsLessThanTen: function() {
return this.shoppingItems.filter(function(item) {
return item.price < 10;
})
}
},
methods: {
filterItems: function(items) {
return items.filter(function(item) {
return item.price < 10;
})
}
}
});
</script>
Затем давайте изменим v-for
, чтобы использовать filterItems
:
<div id="app">
<ul>
<li v-for="item in filterItems(shoppingItems)" v-bind:key="item.name">
{{ item.name }} - {{ item.price }}
</li>
</ul>
</div>
Вот как все будет выглядеть:
Output<div id="app">
<ul>
<li>apple - 7</li>
</ul>
</div>
Метод filterItems
выполняет ту же функцию, что и в примере со значением computed
, и окончательный результат будет таким же.
Заключение
В этой статье вы узнали об использовании v-for
в приложениях Vue. Вы познакомились с диапазонами, ключами, вычисляемыми
и методами
.
Если вы хотите узнать больше о Vue.js, посетите нашу тематическую страницу Vue.js, где вы найдете упражнения и проекты по программированию.