тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Работа с циклами в фреймворке Vue

Пусть теперь в data у нас есть элемент items, который содержит внутри себя массив с некоторыми данными:

let app = new Vue({ el: '#app', data: { items: ['a', 'b', 'c', 'd', 'e'], }, });

Давайте сделаем список ul, внутри которого разместим каждый элемент нашего массива items в отдельную li.

Очевидно, что нам нужен какой-то цикл, который сделает это за нас. Во Vue такой цикл делается следующим образом: <li v-for="item in items">.

Давайте разберем, что тут происходит. Атрибут v-for запускает цикл, строка item in items указывает на то, что мы будем перебирать массив items, а каждый элемент этого массива будет ложиться в переменную item.

В результате эта строка: <li v-for="item in items"> - сделает столько тегов li, сколько раз прокрутится цикл.

Внутри li будет доступна переменная item, в которой каждой раз будет содержаться новый элемент массива. Мы можем вывести ее содержимое с помощью фигурных скобок, вот так: {{ item }}. Эта переменная может иметь любое название, которое мы захотим - как назовем - так и будем пользоваться (то есть item это не какое-то обязательное слово).

Итого полный код для li будет выглядеть так:

<li v-for="item in items">{{ item }}</li>

Давайте соберем все вместе и запустим:

let app = new Vue({ el: '#app', data: { items: ['a', 'b', 'c', 'd', 'e'], }, }); <div id="app"> <ul> <li v-for="item in items">{{ item }}</li> </ul> </div>

Результатом этого кода будет следующий HTML:

<div id="app"> <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> </ul> </div>

Итак, если у нас есть массив с данными, мы можем перебрать его в цикле и сформировать нужный нам HTML код прямо на лету.

Пусть в data хранится следующий массив:

data: { arr: [1, 2, 3, 4, 5], }

Выведите на экран элементы этого массива в виде списка ul.

Варианты циклов

Иногда кроме элементов массива, мы хотели бы получить доступ еще и к ключам. Для этого вместо item in items следует написать (item, index) in items - тогда в переменную item будут попадать элементы массива, а в index - их ключи. Вместо index вы можете использовать любое другое название, как вам удобно.

Давайте попробуем:

let app = new Vue({ el: '#app', data: { items: ['a', 'b', 'c', 'd', 'e'], }, }); <div id="app"> <ul> <li v-for="(item, index) in items">{{ item }} - {{ index }}</li> </ul> </div>

Результатом этого кода будет следующий HTML:

<div id="app"> <ul> <li>a - 0</li> <li>b - 1</li> <li>c - 2</li> <li>d - 3</li> <li>e - 4</li> </ul> </div>

Дан массив имен ['user1', 'user2', 'user3']. Выведите каждый элемент этого массива в отдельной li в списке ul так, чтобы в каждой li кроме элемента массива еще и стоял его порядковый номер в массиве. Вот так:

<ul> <li>user1 - 0</li> <li>user2 - 1</li> <li>user3 - 2</li> </ul>

Переделайте предыдущую задачу так, чтобы порядковые номера начинались с единицы, вот так:

<ul> <li>user1 - 1</li> <li>user2 - 2</li> <li>user3 - 3</li> </ul>

Циклы и объекты

Циклом v-for можно перебирать не только массивы, но и объекты. Синтаксис полностью аналогичный.

Пусть у нас в users хранится объект с именами работников и их зарплатами:

let app = new Vue({ el: '#app', data: { users: {user1: '300$', user2: '400$', user3: '500$'}, }, });

Давайте выведем на экран их зарплаты в виде списка ul:

<div id="app"> <ul> <li v-for="value in users">{{ value }}</li> </ul> </div>

Результатом этого кода будет следующий HTML:

<div id="app"> <ul> <li>300$</li> <li>400$</li> <li>500$</li> </ul> </div>

Можно также выводить одновременно и ключи, и значения. Давайте сделаем это:

<div id="app"> <ul> <li v-for="(value, key) in users">{{ key }} - {{ value }}</li> </ul> </div>

Результатом этого кода будет следующий HTML:

<div id="app"> <ul> <li>user1 - 300$</li> <li>user2 - 400$</li> <li>user3 - 500$</li> </ul> </div>

Если вам нужны еще и порядковые номера элементов в объекте - сделайте третью переменную и номера будут попадать туда:

<div id="app"> <ul> <li v-for="(value, key, index) in users"> {{ key }} - {{ value }} - {{ index }} </li> </ul> </div>

Результатом этого кода будет следующий HTML:

<div id="app"> <ul> <li>user1 - 300$ - 0</li> <li>user2 - 400$ - 1</li> <li>user3 - 500$ - 2</li> </ul> </div>

Дан следующий объект:

{ employee1: '100$', employee2: '200$', employee3: '300$', }

С помощью v-for выведите на экран следующее:

<ul> <li>100$</li> <li>200$</li> <li>300$</li> </ul>

Дан следующий объект:

{ employee1: '100$', employee2: '200$', employee3: '300$', }

С помощью v-for выведите на экран следующее:

<ul> <li>employee1 - 100$</li> <li>employee2 - 200$</li> <li>employee3 - 300$</li> </ul>

Переделайте предыдущую задачу так, чтобы в конце каждой li стоял еще и порядковый номер элемента в объекте. Вот так:

<ul> <li>employee1 - 100$ - 0</li> <li>employee2 - 200$ - 1</li> <li>employee3 - 300$ - 2</li> </ul>

Переделайте предыдущую задачу так, чтобы номера начинались не с нуля, а с единицы. Вот так:

<ul> <li>employee1 - 100$ - 1</li> <li>employee2 - 200$ - 2</li> <li>employee3 - 300$ - 3</li> </ul>

Многомерные массивы и циклы

Давайте попробуем цикл на более сложных конструкциях.

Пусть у нас в users хранится массив, элементами которого являются объекты с именами работников и их зарплатами:

let app = new Vue({ el: '#app', data: { users: [ {name: 'user1', salary: '300$'}, {name: 'user2', salary: '400$'}, {name: 'user3', salary: '500$'}, ], }, });

Если запустить такой цикл - <li v-for="user in users"> - то в user каждый раз будет попадать объект с работником: сначала {name: 'user1', salary: '300$'}, потом {name: 'user2', salary: '400$'} и так далее.

То есть в user.name будет лежать имя работника, а в user.salary - его зарплата.

Давайте запустим наш код:

let app = new Vue({ el: '#app', data: { users: [ {name: 'user1', salary: '300$'}, {name: 'user2', salary: '400$'}, {name: 'user3', salary: '500$'}, ], }, }); <div id="app"> <ul> <li v-for="user in users"> {{ user.name }} - {{ user.salary }} </li> </ul> </div>

Результатом этого кода будет следующий HTML:

<div id="app"> <ul> <li>user1 - 300$</li> <li>user2 - 400$</li> <li>user3 - 500$</li> </ul> </div>

Дан следующий массив:

hrefs: [ {href: '1.html', text: 'ссылка 1'}, {href: '2.html', text: 'ссылка 2'}, {href: '3.html', text: 'ссылка 3'}, ]

С помощью v-for выведите на экран следующее:

<ul> <li><a href="1.html">ссылка 1</a></li> <li><a href="2.html">ссылка 2</a></li> <li><a href="3.html">ссылка 3</a></li> </ul>

Дан следующий массив продуктами (названия, цены за штуку и количество):

products: [ {name: 'product1', price: 100, quantity: 5}, {name: 'product2', price: 200, quantity: 4}, {name: 'product3', price: 300, quantity: 3}, ]

С помощью v-for выведите на экран следующее:

<ul> <li>product1, цена: 100, количество: 5, сумма: 500</li> <li>product2, цена: 200, количество: 4, сумма: 800</li> <li>product3, цена: 300, количество: 3, сумма: 900</li> </ul>

Сумма должна представлять собой произведение (умножение) цены на количество.

Директива v-for и тег template

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

<li>{{ item }}</li> <li class="divider"></li>

Нюанс в том, что когда у нас был один тег li - мы задавали директиву v-for ему. Но что делать, если у нас два тега li?

В этом случае можно объединить наши теги в какой-нибудь другой тег, например, в div, и задать директиву v-for ему:

<ul> <div v-for="item in items"> <li>{{ item }}</li> <li class="divider"></li> </div> </ul>

Проблема, однако, в том, что в теге ul не могут располагаться другие теги, кроме li. Да и даже, если бы в теге ul разрешено было бы размещать другие теги, все равно это было бы не удобно, так как могло бы сломать нашу верстку (нам не нужен этот div для верски, однако, пришлось бы его добавить).

Для решения проблемы в фремйворке Vue предусмотрен тег <template>. Данный тег выполняет объединяющую функцию - в нем можно группировать теги, задавая им общую директиву v-for, и при этом верстка, полученная в результате, не будет содержать никаких лишний тегов (то есть после цикла все теги <template> исчезнут из верстки).

Итак, добавим тег <template>:

<ul> <template v-for="item in items"> <li>{{ item }}</li> <li class="divider"></li> </template> </ul>

Давайте напишем полный код и запустим его:

let app = new Vue({ el: '#app', data: { items: ['a', 'b', 'c', 'd', 'e'], }, }); <div id="app"> <ul> <template v-for="item in items"> <li>{{ item }}</li> <li class="divider"></li> </template> </ul> </div>

Результатом этого кода будет следующий HTML:

<div id="app"> <ul> <li>a</li> <li class="divider"></li> <li>b</li> <li class="divider"></li> <li>c</li> <li class="divider"></li> <li>d</li> <li class="divider"></li> <li>e</li> <li class="divider"></li> </ul> </div>

Сформируйте список ul, выводя в каждой итерации цикла по 3 тега li.

Указание key

По следующей ссылке изучите раздел key. Сильно глубоко в него вникать не нужно.