VueJS, часть 4: Рендеринг в цикле

Введение

Недавно я начал изучать VueJS, и эта статья является частью серии моих заметок во время его изучения. В этом уроке я расскажу, как использовать циклы для рендеринга контента.

Директива v-for

Отображение списков довольно распространено при создании веб-приложений. Проблема в том, что чаще всего мы не знаем заранее, сколько там предметов. И даже если бы мы это сделали, повторять весь этот контент вручную было бы безумием. Вот почему во Vue есть директива v-for. Вы добавляете его к элементу, передаете ему массив элементов, и он отображает содержимое внутри него для каждого элемента массива.

в-например

Например, давайте отобразим список людей с их именем, фамилией и датой рождения. Поэтому нам нужен этот список в данных приложения.

{
  data() {
    return {
      people: [
        {
          id: 1,
          firstName: "John",
          lastName: "Doe",
          dob: "01-01-1980"
        },
        {
          id: 1,
          firstName: "Johny",
          lastName: "Doe",
          dob: "01-01-1980"
        },
        {
          id: 1,
          firstName: "James",
          lastName: "Doe",
          dob: "01-01-1980"
        }
      ]
    }
  },
  methods: {}
}

Затем, чтобы отобразить его в HTML, достаточно добавить его в директиву v-for.

<ul>
  <li v-for="person in people" >
    <div>{{person.firstName}} {{person.lastName}} - {{person.dob}}</div>
  </li>
</ul>

Использование индекса в цикле

Обычно при циклическом обходе массива используется текущий индекс. И это то, к чему вы можете получить доступ с помощью директивы v-for. В приведенном выше коде вы можете заметить, что я использовал синтаксис person в люди. Помимо person, вторым аргументом, который вы можете использовать, является index.

<li v-for="(person, index) in people" >
  <div>{{index}}. {{person.firstName}} {{person.lastName}} - {{person.dob}}</div>
</li>

Ключевой атрибут

При отображении значений в HTML Vue обновит измененные значения. Однако с массивами это немного сложнее, и вы можете помочь Vue узнать, какие элементы обновляются, чтобы их можно было правильно и эффективно…