На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Урок 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, циклы

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




Поля и методы в Java: правила доступа к полям
Как между делом создать программу на заказ


© upread.ru 2013-2021
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.