Вывод массивов и директива v-for

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

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

v-for="item in items"

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

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

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <ul>
		<li v-for="user in users">{{ user}}</li>
    </ul>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
  data() {
    return { users: ['Tom', 'Sam', 'Alice', 'Kate']}
  }
}).mount('#app');
</script>
</body>
</html>

Таким образом, для каждого элемента в массиве users будет создаваться html-элемент <li>. При переборе массива users каждый перебираемый элемент помещается в переменную user. И таким образом мы можем перебрать все элементы массива и вывести их на веб-страницу.

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

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

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<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"></script>
<script>
Vue.createApp({
  data() {
    return { users: [
                    {name:'Tom', age:22}, 
                    {name:'Bob', age:31}, 
                    {name: 'Sam', age:28}
            ]}
  }
}).mount('#app');
</script>
</body>
</html>
Перебор массива объектов с помощью v-for в Vue 3

Индексы

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

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

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

Например:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <ul>
		<li v-for="(user, index) in users">{{index + 1}}. {{user}}</li>
    </ul>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
  data() {
    return { users: ['Tom', 'Bob', 'Sam']}
  }
}).mount('#app');
</script>
</body>
</html>
Индексы элементов в массиве в v-for в Vue 3

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<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"></script>
<script>
Vue.createApp({
  data() {
    return { 
		users: [
			{name:'Tom', age:22}, 
			{name:'Bob', age:31}, 
			{name: 'Sam', age:28}
	]}
  }
}).mount('#app');
</script>
</body>
</html>
Перебор свойств объекта с помощью директивы v-for

template

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

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<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"></script>
<script>
Vue.createApp({
  data() {
    return { 
		users: [
			{name:'Tom', age:22}, 
			{name:'Bob', age:31}, 
			{name: 'Sam', age:28}
	]}
  }
}).mount('#app');
</script>
</body>
</html>
template и v-for во Vue 3

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

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

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>
перебор чисел с помощью v-for во Vue 3

v-for и v-if

Если эти директивы используются одновременно на одном элементе html, то v-if имеет больший приоритет, нежели v-for. Это значит, что условие директивы v-if не имеет доступа к переменным из директивы v-for. Например:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <ul>
        <li v-for="user in users" v-if="user.age > 25">
            <p>Name: {{user.name}}</p>
            <p>Age: {{user.age}}</p>
        </li>
    </ul>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
  data() {
    return { 
		users: [
			{name:'Tom', age:22}, 
			{name:'Bob', age:31}, 
			{name: 'Sam', age:28}
	]}
  }
}).mount('#app');
</script>
</body>
</html>

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

Чтобы выйти из данной ситуации мы можем обернуть директиву v-for в тег <template>:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <ul>
		<template v-for="user in users">
        <li v-if="user.age > 25">
            <p>Name: {{user.name}}</p>
            <p>Age: {{user.age}}</p>
        </li>
		</template>
    </ul>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
  data() {
    return { 
		users: [
			{name:'Tom', age:22}, 
			{name:'Bob', age:31}, 
			{name: 'Sam', age:28}
	]}
  }
}).mount('#app');
</script>
</body>
</html>
сочетание директив v-for и v-if

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

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