Как работает v-for во Vue?

Question

v-for используется для рендеринга списка элементов на основе массива или объекта. Vue проходит по коллекции и создаёт копию шаблона для каждого элемента. Каждый элемент списка связан со своим куском данных. При изменении массива Vue обновляет DOM автоматически. Это основной способ работы со списками во Vue.

YeaHub · Accepted Answer

Директива v-for позволяет декларативно описывать повторяющиеся элементы интерфейса.Определениеv-for — это директива Vue, предназначенная для рендеринга списков элементов на основе данных.Базовый синтаксисНаиболее распространённая форма:

Vue перебирает массив items и для каждого элемента создаёт DOM-узел на основе шаблона.Источники данныхv-for может работать с:массивамиобъектамидиапазонами чиселПример с индексом:

{{ index }} — {{ item.name }}

Как Vue обновляет DOMVue отслеживает изменения в данных и:добавляет элементы при pushудаляет при spliceобновляет изменённые элементыКраткий выводv-for — основной инструмент для отображения динамических списков во Vue и тесно связан с реактивностью фреймворка.