Урок 8. Выводим цикл с директивой v-for в Vue 3

Все уроки по Vue 3 расположены здесь. В поле data объекта App (Vue) мы можем хранить не только строковые переменные, но и массивы. Давайте попробуем поработать с ними. Начнем с того, что инициализируем массив в файле app.js:

const App = {
	data() {
		return {
			services: ['Программа на Java', 'Помощь с PHP', 'Сайт на Vue 3']
		}
	}
}

Vue.createApp(App).mount('#app')

Это просто пример, в реальной разработке вы будете получать данные для массивов чтением из JSON-ответа AJAX, например, но сейчас нам это не существенно.

Сам файл с разметкой:

<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Vue тест upread.ru</title>
	</head>
	<body>
		<div id="app">
			<ul v-if="services.length !== 0">
				<li class="list-item" v-for="(service, idx) in services">
					<span>{{ idx + 1 }} {{ service }}</span>
				</li>
				<hr />
				<li>
					<strong>Всего: {{ services.length }}</strong>
				</li>
			</ul>
		</div>
		<script src="https://unpkg.com/vue@next"></script>
		<script src="app.js"></script>
	</body>
</html>

На что тут следует обратить внимание:

Сначала мы проверяем длину массива с помощью директивы v-if и если она не нулевая, то выводим список
Дальше с помощью директивы v-for выводим элементы списка. Конструкция похожа на foreach в PHP или forEach в JS
idx – это индекс элемента в массиве, так как массив начинаеся с нуля. То прибавляем к нему единицу перед выводом

В итоге получается вот такой список:

Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

статьи IT, Уроки по Vue, Vue, циклы

Читайте также:

Помогите сайту

Программирование up

Мои услуги