Перебор группы тегов в Vue
Иногда нам нужно формировать в цикле сразу на группу тегов. В этом случае мы можем объединить их общим родителем и применить цикл к нему:
<template>
<div v-for="elem in arr">
<p>{{ elem }}</p>
<hr>
</div>
</template>
Иногда нам не хотелось бы объединять теги
общим родителем. В этом случае
их можно объединить тегом
template, применив цикл
к этому тегу. Этот тег объединяет
другие теги, но не попадает
в итоговую верстку.
Давайте попробуем:
<template>
<template v-for="elem in arr">
<p>{{ elem }}</p>
<hr>
</template>
</template>
Дан следующий массив:
data() {
return {
items: [1, 2, 3],
}
}
Сформируйте с помощью этого массива следующую верстку:
<div>
<p>1</p>
<p class="divider"></p>
</div>
<div>
<p>2</p>
<p class="divider"></p>
</div>
<div>
<p>3</p>
<p class="divider"></p>
</div>
Дан следующий массив:
data() {
return {
items: [1, 2, 3],
}
}
Сформируйте с помощью этого массива следующую верстку:
<ul>
<li>1</li>
<li class="divider"></li>
<li>2</li>
<li class="divider"></li>
<li>3</li>
<li class="divider"></li>
</ul>