Уроки VueJS. Что такое V-FOR директива
Что такое директива V-FOR в фреймворке VueJS
В фреймворке VueJS существуют директивы, которые фронтенд-разработчики используют ежедневно. Директива V-FOR служит для отрисовки (рендеринга) списка элементов массива в верстке. Иными словами, V-FOR - это циклы. Если вы не знаете, что такое директивы в фреймворке VueJS, обязательно посмотрите вводные уроки VueJS.
Смотрите видео о директиве V-FOR
Простой пример использования директивы V-FOR в фреймворке VueJS
Для того, чтобы понять как пользоваться директивой V-FOR в фреймворке VueJS, нам необходимо в data создать массив, например items:
И после того, как создали массив items, мы можем написать следующий код для использования директивы V-FOR и отрисовки элементов массива в браузере:
В результате в браузере вы увидите вывод в списке элементов массива items:
- Apple
- Lemon
Смотрите живой пример использования v-for в интерактивном задании курса VueJS
Если вы хотите вывести индексы массива, вы можете изменить код на такой:
И в результате работы в браузере вы увидите следующий вывод:
- Apple - 0
- Lemon - 1
где 0 и 1 - это индексы массива
Смотрите живой пример использования v-for в интерактивном задании курса VueJS
Выводы
Использовать директиву V-FOR очень просто. В уроках VueJS я расскажу о многих директивах, уделю внимание важным моментам при использовании VueJS, а также покажу много интересных практических примеров.
Ссылки к уроку
Массивы в Javascript в курсе Javascript/jQuery
С уважением, Сергей Никонов
Успехов в обучении!