Что такое директива V-FOR в фреймворке VueJS
В фреймворке VueJS существуют директивы, которые фронтенд-разработчики используют ежедневно. Директива V-FOR служит для отрисовки (рендеринга) списка элементов массива в верстке. Иными словами, V-FOR - это циклы. Если вы не знаете, что такое директивы в фреймворке VueJS, обязательно посмотрите вводные уроки VueJS.
Смотрите видео о директиве V-FOR
Простой пример использования директивы V-FOR в фреймворке VueJS
Для того, чтобы понять как пользоваться директивой V-FOR в фреймворке VueJS, нам необходимо в data создать массив, например items:
var app = new Vue({
el: '#app',
data: {
message: 'Hello, FructCode!',
items: [
{ title: 'Apple' },
{ title: 'Lemon' }
],
}
})И после того, как создали массив items, мы можем написать следующий код для использования директивы V-FOR и отрисовки элементов массива в браузере:
<div id="app">
<ul>
<li v-for="item in items">
{{ item.title }}
</li>
</ul>
</div>В результате в браузере вы увидите вывод в списке элементов массива items:
- Apple
- Lemon
Смотрите живой пример использования v-for в интерактивном задании курса VueJS
Если вы хотите вывести индексы массива, вы можете изменить код на такой:
<ul>
<li v-for="(item, index) in items">
{{ item.title }} - {{ index }}
</li>
</ul>И в результате работы в браузере вы увидите следующий вывод:
- Apple - 0
- Lemon - 1
где 0 и 1 - это индексы массива
Смотрите живой пример использования v-for в интерактивном задании курса VueJS
Выводы
Использовать директиву V-FOR очень просто. В уроках VueJS я расскажу о многих директивах, уделю внимание важным моментам при использовании VueJS, а также покажу много интересных практических примеров.
Ссылки к уроку
Массивы в Javascript в курсе Javascript/jQuery
С уважением, Сергей Никонов
Успехов в обучении!