Sentencias de bucle en Vue.js

En Vue, las sentencias de bucle se implementan principalmente mediante la directiva v-for, que se usa para recorrer arrays u objetos y generar el número correspondiente de elementos.

Use la directiva v-for en un elemento para representar elementos en bucle según el array u objeto de datos de origen.

Recorrer un array:

v-for="(item, index) in items"

Recorrer un objeto:

v-for="(value, key, index) in object"

  • Función de keyUso de :v-forAl renderizar una lista, debe proporcionar a cada elemento una únicakeypropiedad, para que Vue pueda identificar la unicidad de cada elemento y así realizar actualizaciones eficientes del DOM.

  • Bucles anidadosSe pueden anidar múltiplesv-forv-for para renderizar estructuras de arrays u objetos multidimensionales.

v-for puede vincular datos a un array para renderizar una lista:

Ejemplo de v-for

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'Ejemplo' },
        { text: 'Taobao' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

Pruébalo »

v-for también admite un segundo parámetro opcional, cuyo valor es el índice del elemento actual:

Ejemplo de v-for

index es el valor del índice del elemento de la lista:

<div id="app">
  <ol>
    <li v-for="(site, index) in sites">
      {{ index }} -{{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'Ejemplo' },
        { text: 'Taobao' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

Pruébalo »

Uso de v-for en la plantilla <template>:

v-for

<ul> <template v-for="site in sites"> <li>{{ site.text }}</li> <li>--------------</li> </template> </ul>

Pruébalo »

v-for iterando sobre objetos

v-for puede iterar los datos a través de las propiedades de un objeto:

v-for

<div id="app"> <ul> <li v-for="value in object"> {{ value }} </li> </ul> </div> <script>const app = { data() { return { object: { name: 'Tutorial para novatos', url: 'http://www.example.com', slogan: '¡Lo que se aprende no es solo tecnología, sino también un sueño!' } } } } Vue.createApp(app).mount('#app')</script>

Pruébalo »

También puedes proporcionar un segundo parámetro para el nombre de la clave:

v-for

<div id="app"> <ul> <li v-for="(value, key) in object"> {{ key }} : {{ value }} </li> </ul> </div>

Pruébalo »

El tercer parámetro es el índice:

v-for

<div id="app"> <ul> <li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li> </ul> </div>

Pruébalo »

v-for iterando sobre enteros

v-for también puede iterar enteros

v-for

<div id="app"> <ul> <li v-for="n in 10"> {{ n }} </li> </ul> </div>

Pruébalo »

Mostrar resultados filtrados/ordenados

Podemos procesar los elementos de un array antes de mostrarlos; generalmente se puede crear una propiedad computada que devuelva el array filtrado u ordenado.

Ejemplo de v-for

Mostrar los números pares del array:

<div id="app"> <ul> <li v-for="n in evenNumbers">{{ n }}</li> </ul> </div>

Pruébalo »

Uso combinado de v-for/v-if

El ejemplo anterior combina v-for/v-if para establecer un valor predeterminado en un select:

Ejemplo de v-for/v-if

v-for genera la lista y v-if establece el valor seleccionado:

<div id="app"> <select @change="changeVal($event)" v-model="selOption"> <template v-for="(site,index) in sites" :site="site" :index="index" :key="site.id"> <!--El índice 1 se establece como valor predeterminado; el índice comienza en 0.--> <option v-if = "index == 1" :value="site.name" selected>{{site.name}}</option> <option v-else :value="site.name">{{site.name}}</option> </template> </select> <div>Has seleccionado: {{selOption}}</div> </div> <script>Has seleccionado</script>

Pruébalo »

Usar v-for en componentes

Si aún no has aprendido sobre componentes, puedes omitir esta parte.

En un componente personalizado, puedes usar v-for de la misma manera que en cualquier elemento normal:

<my-component v-for="item in items" :key="item.id"></my-component>

Sin embargo, ningún dato se pasa automáticamente al componente, porque el componente tiene su propio ámbito independiente. Para pasar los datos de la iteración al componente, debemos usar props:

<my-component
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
></my-component>

La razón por la que item no se inyecta automáticamente en el componente es que esto haría que el componente estuviera estrechamente acoplado al funcionamiento de v-for. Especificar claramente el origen de los datos del componente permite reutilizarlo en otras situaciones.

A continuación se muestra un ejemplo completo de una sencilla lista de tareas (todo):

Ejemplo

<div id="todo-list-example"> <form v-on:submit.prevent="addNewTodo"> <label for="new-todo">Add a todo</label> <input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat" /> <button>Add</button> </form> <ul> <todo-item v-for="(todo, index) in todos" :key="todo.id" :title="todo.title" @remove="todos.splice(index, 1)" ></todo-item> </ul> </div>

Pruébalo »
Otras extensiones