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

4 months ago | 4.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 и в этой...
13.4K

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

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

Что такое Modern Javascript?

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

Классы в JAVASCRIPT

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

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

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

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

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

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

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























Курс Bootstrap 4. Обучение программирования, уроки программирования
Курс Bootstrap 4. Обучение программирования, уроки программирования
new
пока нет оценок
Сергей Никонов
  • Ориентировочная дата выхода нового урока - 10.11.2019

Курс VueJS Фреймворк. Обучение программирования, уроки программирования
Курс VueJS Фреймворк. Обучение программирования, уроки программирования
new
пока нет оценок
Сергей Никонов
  • Ориентировочная дата выхода нового урока - 13.11.2019

Курс Yii2 Фреймворк. Обучение программирования, уроки программирования
Курс Yii2 Фреймворк. Обучение программирования, уроки программирования
new
пока нет оценок
Сергей Никонов
  • Ориентировочная дата выхода нового урока - 16.11.2019

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

Курс Javascript/jQuery. Обучение программирования, уроки программирования
Курс Javascript/jQuery. Обучение программирования, уроки программирования
4.8 / 899
Сергей Никонов
  • 21 заданий
  • 10 видео
  • 1 час

Курс CodeIgniter. Обучение программирования, уроки программирования
Курс CodeIgniter. Обучение программирования, уроки программирования
4.9 / 539
Сергей Никонов
  • 28 заданий
  • 26 видео
  • 6 часов

Курс Linux/GIT/Хостинг. Обучение программирования, уроки программирования
Курс Linux/GIT/Хостинг. Обучение программирования, уроки программирования
4.9 / 695
Сергей Никонов
  • 29 заданий
  • 22 видео
  • 2 часа

Курс PHP/MySQL. Обучение программирования, уроки программирования
Курс PHP/MySQL. Обучение программирования, уроки программирования
4.8 / 839
Сергей Никонов
  • 69 заданий
  • 37 видео
  • 6 часов

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

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