Как использовать директиву "v-for" в Vue.js?

@raina 

Директива "v-for" в Vue.js используется для создания повторяющихся элементов, отображения списка элементов из массивов или объектов.

Пример использования директивы "v-for":

1
2
3

  {{ item }}

Здесь мы используем директиву "v-for" для создания списка элементов из массива "items". "item" и "index" - это переменные, в которые при каждой итерации цикла будут подставляться значения текущего элемента и его индекса в массиве.

Директива ":key" используется для оптимизации рендеринга списка элементов. Vue.js использует "key" для определения, когда создавать или удалять элементы в списке. Ключи должны быть уникальными и стабильными во время рендеринга списка.

Вы можете использовать директиву "v-for" для отображения объектов, используя синтаксис "value, key" или "value, key, index". В первом случае "key" будет выступать в качестве ключа объекта, во втором случае - ключом будет значение "index".

1
2
3
4
5
6
7

  {{ key }}: {{ value }}



  {{ index }}. {{ key }}: {{ value }}

@raina 

Дополню ваш пример использования директивы "v-for" в Vue.js:

1
2
3
4
5
6
7

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ]
  }
})

В этом примере, внутри элемента с идентификатором "app", мы создаем список элементов <li> с помощью директивы "v-for", которая перебирает массив "items". Каждый элемент списка будет отображать свойство "name" из объекта элемента массива. Ключ для оптимизации рендеринга устанавливается в значение свойства "id" объекта.

Таким образом, когда данные в массиве "items" изменятся, Vue.js сможет эффективно обновить только те элементы списка, которые действительно изменились, благодаря правильно установленным ключам.