v-for looping для начинающих, Изучите основы цикла в vueJS.

Чтобы легко следовать этому руководству, не стесняйтесь использовать Codepen или CodeSandBox.

Для начала создайте файл index.html, а также файл main.js.

В начале вашего html-файла с помощью шаблона по умолчанию, если ввести восклицательный знак в IDE (я использую vscode), хорошей альтернативой является Atom или Webstorm.

Не забудьте включить следующий элемент / тег скрипта между тегами заголовка

‹Скрипт src =» https://unpkg.com/vue '›‹/script›

Vue JS использует Dom для рендеринга данных или компонентов. Для этого создайте в своем теле div с идентификатором.

Оставьте элемент скрипта внутри тела, это будет использовать ваш код в файле main.js.
Вставьте следующее внутри тега html body

Давайте создадим наш первый экземпляр vue для рендеринга данных на нашей веб-странице. Откройте файл main.js, и мы запустим наши экземпляры vue, введя новое показание Vue ниже. Я также создал себе массив и массив объектов, поскольку мы будем их просматривать и отображать на странице или. Данные могут быть любыми, какими вы хотите, наслаждайтесь.

В приведенном выше коде вы вызываете идентификатор div с атрибутом el, как если бы вы делали стили CSS с помощью # (ID). Все ваши данные, очевидно, входят в данные

Вернемся к html-файлу для рендеринга ваших данных.

Мы будем использовать v-for для перебора данных, в основном работает как цикл for. Мы называем элемент данных, которые нам нужны, в нашем случае мы хотим отобразить имя наших имен внутри списка. Мы делаем это, просто набирая v-for = "name in names". Работа "name" представляет отдельный элемент (имя) в нашем массиве данных, N примечание, что имя для выбора элемента может быть любым именем, которое вы хотите, кроме самого имени массива. Массив объектов работает так же, хотя он должен быть глубже, с той лишь разницей, что мы вызываем значения объекта с расширением. оператор, в нашем случае мы вызвали команду, используя rugbyTeam.team, чтобы получить название команды. Проверьте код ниже.

Вот как перебирать массивы с помощью цикла vueJSfor.

Ссылка на код соуса на игровой площадке Codesandbox: https://codesandbox.io/s/vue-looping-qwzoy

Подпишитесь на меня в Twitter: «https://twitter.com/cba большаяzil3
Спасибо за уделенное время и надеюсь, что вы узнали что-то новое.

Ваше здоровье.