Вопрос проверяет понимание механизма рендеринга списков во Vue и того, как фреймворк создает DOM-элементы на основе данных.
v-for используется для рендеринга списка элементов на основе массива или объекта. Vue проходит по коллекции и создаёт копию шаблона для каждого элемента. Каждый элемент списка связан со своим куском данных. При изменении массива Vue обновляет DOM автоматически. Это основной способ работы со списками во Vue.
Директива v-for позволяет декларативно описывать повторяющиеся элементы интерфейса.
v-for — это директива Vue, предназначенная для рендеринга списков элементов на основе данных.
Наиболее распространённая форма:
<li v-for="item in items">
{{ item.name }}
</li>
Vue перебирает массив items и для каждого элемента создаёт DOM-узел на основе шаблона.
v-for может работать с:
массивами
объектами
диапазонами чисел
Пример с индексом:
<li v-for="(item, index) in items">
{{ index }} — {{ item.name }}
</li>
Vue отслеживает изменения в данных и:
добавляет элементы при push
удаляет при splice
обновляет изменённые элементы
v-for — основной инструмент для отображения динамических списков во Vue и тесно связан с реактивностью фреймворка.