La instrucción v-for es una instrucción de representación de listas de uso común en Vue.js, que puede realizar fácilmente la representación en bucle basada en matrices u objetos. El uso específico es el siguiente:
1. Gramática básica
<div v-for="(item, index) in items">
{
{ index }} - {
{ item }}
</div>
Entre ellos, después de v-for (item, index) in items, elementos es la fuente de datos que debe atravesarse, elemento es el valor de cada elemento e índice es el índice de cada elemento.
2. Atravesar objetos
<div v-for="(value, key, index) in object">
{
{ index }} - {
{ key }}: {
{ value }}
</div>
Cuando v-for atraviesa el objeto, (value, key, index) in objectel valor es el valor de cada atributo, la clave es la clave de cada atributo y el índice es el índice del atributo.
3. Recorre los números
<div v-for="n in 10">
{
{ n }}
</div>
Cuando v-for atraviesa números, n in 1010 es el rango de números que debe atravesarse.
4.v-para clave
<div v-for="(item, index) in items" :key="index">
{
{ index }} - {
{ item }}
</div>
Cuando se utiliza v-for para la representación en bucle, cada elemento debe tener un valor clave único para que Vue.js pueda representar la lista de manera más eficiente . Puede:keyespecificar el valor clave por. Generalmente se recomienda utilizar el identificador único del elemento en la fuente de datos como valor clave.
5.Uso combinado de v-for y v-if
<div v-for="(item, index) in items" v-if="item.active">
{
{ index }} - {
{ item }}
</div>
Cuando use v-for y v-if en combinación, preste atención a la posición de v-if. Si v-if se coloca después de v-for, todos los elementos se representarán primero y luego se filtrarán según v-if. Si v-if se coloca antes de v-for, solo se representarán los elementos que cumplan la condición. Si desea filtrar datos al mismo tiempo y reducir la sobrecarga de renderizado, se recomienda utilizar propiedades o filtros calculados en lugar de v-if.
Lo anterior es el uso básico de la instrucción v-for, que se puede usar de manera flexible según las necesidades reales.