La directiva v-for es una directiva de Vue.js que se utiliza para recorrer datos, generalmente una array u objeto. Primero, crearemos un elemento div con id como aplicación y aplicaremos la directiva v-for a un elemento con datos. Ahora crearemos estos datos inicializando una instancia de Vue con el atributo de datos que contiene el valor.
Sintaxis:
v-for="data in datas"
Parámetros: esta función acepta datos que son una array u objeto sobre el cual recorreremos.
Ejemplo: este ejemplo usa Vue.js para recorrer una array con v-for.
<!DOCTYPE html> <html> <head> <title> VueJS | v-for directive </title> <!-- Load Vuejs --> <script src= "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </script> </head> <body> <div style="text-align: center; width: 600px;"> <h1 style="color: green;"> GeeksforGeeks </h1> <b> VueJS | v-for directive </b> </div> <div id="canvas" style= "border:1px solid #000000; width: 600px;height: 200px;"> <div id="app"> <h2 v-for="data in datas"> {{data}} </h2> </div> </div> <script> var app = new Vue({ el: '#app', data: { datas: [ 'Hello', 'World', 'GeeksforGeeks' ] } }) </script> </body> </html>
Producción: