Уроки VueJS. Что такое V-FOR директива

Что такое директива 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

Курс Modern Javascript

Массивы в курсе PHP/MySQL

С уважением, Сергей Никонов

Успехов в обучении!