v-for

Последнее обновление: 29.08.2017

Для рендеринга коллекций предназначена директива v-for. Она имеет следующий синтаксис:

v-for="item in items"

Где items представляет массив, а item псевдоним для текущего перебираемого элемента из массива items.

Например, выведем массив элементов на страницу:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
	<ul>
	<li v-for="phone in phones">{{phone}}</li>
	</ul>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
			phones: ['iPhone 7', 'Galaxy S8', 'Nokia N8', 'Xiaomi Mi6']
		}
    });
</script>
</body>
</html>

Таким образом, для каждого элемента в массиве phones будет создаваться html-элемент <li>.

v-for и работа с массивами в Vue.js

Подобным образом можно выводить и более сложные объекты из массива:

<div id="app">
	<ul>
	<li v-for="user in users"><p>Имя: {{user.name}}</p>
							<p>Возраст: {{user.age}}</p></li>
	</ul>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
			users: [
					{name:'Tom', age:22}, 
					{name:'Bob', age:31}, 
					{name: 'Sam', age:28}
			]
		}
    });
</script>
Перебор массива объектов с помощью v-for в Vue.js

Индексы

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

v-for="(element, index) in array"

Где element - это текущий перебираемый элемент в массиве array, а index - индекс этого элемента в массиве.

Например:

<div id="app">
	<ul>
		<li v-for="(phone, index) in phones">{{index + 1}}. {{phone}}</li>
	</ul>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
			phones: ['iPhone 7', 'Galaxy S8', 'Nokia N8', 'Xiaomi Mi6']
		}
    });
</script>
Индексы элементов в массиве в v-for в Vue.js

Перебор объектов

Подобно тому, как мы перебираем массив, мы можем перебирать и все свойства одного объекта с помощью синтаксиса:

v-for="(value, property) in obj"

Где property - название свойства объекта, а value - его значение.

<div id="app">
	<ul>
		<li v-for="user in users">
			<p v-for="(value,key) in user">{{key}} : {{value}}</p>
		</li>
		
	</ul>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
			users: [
					{name:'Tom', age:22}, 
					{name:'Bob', age:31}, 
					{name: 'Sam', age:28}
			]
		}
    });
</script>
Перебор объекта в v-for

template

Директиву v-for можно применить только к одному html-элементу. Если необходимо, чтобы для каждого объекта из массива создавалось несколько html-элементов, то блок этих элементов следует обертывать элементом template:

<div id="app">
	<ul>
		<template v-for="user in users">
			<li>Name: {{user.name}}</li>
			<li>Age: {{user.age}}</li>
		</template>
		
	</ul>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
			users: [
					{name:'Tom', age:22}, 
					{name:'Bob', age:31}, 
					{name: 'Sam', age:28}
			]
		}
    });
</script>
template и v-for во Vue.js

Перебор чисел

С помощью v-for можно перебрать все числа от 1 до определенного значения. Например, перебор всех чисел от 1 до 10:

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>
перебор чисел в v-for во Vue.js

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850