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

4 years ago | 10.5K

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

 

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

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



Поделитесь в социальных сетях





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

Что такое NodeJS и npm?

На современном Javascript можно разрабатывать не только Frontend часть сайта, но и Backend и в этой...
17.5K

Большое обновление FructCode

Обучайтесь эффективнее на онлайн платформе FructCode с новыми интерактивными заданиями и новыми возм...
5.1K

Что такое Modern Javascript?

Языки программирования развиваются и Javascript не стал исключением. В этой статье вы узнаете о том,...
13.6K

Классы в JAVASCRIPT

У языка Javascript достаточно непривычный для программистов синтаксис, особенно, если раньше они пис...
17.6K

Что такое веб-хостинг

Хостинг - это специализированный компьютер (сервер), который предоставляет пользователям возможности...
5.5K

Как убрать index.php из URL

Для продвижения сайта в интернет, через поисковые системы, необходимы производить оптимизации. При с...
33.4K

Что такое файл index.php?

В этой статье вы узнаете, что такое файл index.php, чем его можно открыть. Мы рассмотрим самый прост...
94.7K























Курс HTML/CSS Advanced. Обучение программирования, уроки программирования
Курс HTML/CSS Advanced. Обучение программирования, уроки программирования
пока нет оценок
Sergei Nikonov
  • Новинка!
  • 162 заданий
  • 60 видео
  • 17 часов

Курс Bootstrap 4. Обучение программирования, уроки программирования
Курс Bootstrap 4. Обучение программирования, уроки программирования
new
пока нет оценок
Sergei Nikonov
  • Уроки Bootstrap 4 в разработке

Курс VueJS Фреймворк. Обучение программирования, уроки программирования
Курс VueJS Фреймворк. Обучение программирования, уроки программирования
new
пока нет оценок
Sergei Nikonov
  • Уроки VueJS в разработке

Курс Yii2 Фреймворк. Обучение программирования, уроки программирования
Курс Yii2 Фреймворк. Обучение программирования, уроки программирования
new
пока нет оценок
Sergei Nikonov
  • Уроки Yii2 в разработке

Курс Modern Javascript. Обучение программирования, уроки программирования
Курс Modern Javascript. Обучение программирования, уроки программирования
new
4.8 / 164
Sergei Nikonov
  • Новинка!
  • 30 заданий
  • 16 видео
  • 1 час

Курс Javascript/jQuery. Обучение программирования, уроки программирования
Курс Javascript/jQuery. Обучение программирования, уроки программирования
4.7 / 1668
Sergei Nikonov
  • 21 заданий
  • 10 видео
  • 1 час

Курс CodeIgniter. Обучение программирования, уроки программирования
Курс CodeIgniter. Обучение программирования, уроки программирования
4.9 / 648
Sergei Nikonov
  • 28 заданий
  • 26 видео
  • 5 часов

Курс Linux/GIT/Hosting. Обучение программирования, уроки программирования
Курс Linux/GIT/Hosting. Обучение программирования, уроки программирования
4.9 / 1112
Sergei Nikonov
  • 29 заданий
  • 22 видео
  • 2 часа

Курс PHP/MySQL. Обучение программирования, уроки программирования
Курс PHP/MySQL. Обучение программирования, уроки программирования
4.8 / 1418
Sergei Nikonov
  • 69 заданий
  • 37 видео
  • 5 часов

Курс Bootstrap 3. Обучение программирования, уроки программирования
Курс Bootstrap 3. Обучение программирования, уроки программирования
4.9 / 2501
Sergei Nikonov
  • 50 заданий
  • 25 видео
  • 4 часа

Курс HTML/CSS. Обучение программирования, уроки программирования
Курс HTML/CSS. Обучение программирования, уроки программирования
4.9 / 4941
Sergei Nikonov
  • 66 заданий
  • 32 видео
  • 5 часов