Vue es un marco progresivo para construir interfaces de usuario. La biblioteca principal se centra solo en la capa de visualización y es fácil de seleccionar e integrar con otras bibliotecas. Vue también es perfectamente capaz de impulsar sofisticadas aplicaciones de una sola página en combinación con herramientas modernas y bibliotecas de soporte.
La directiva v-for se usa para recorrer una lista de elementos. La sintaxis tiene la forma de elemento en elementos , donde elementos es la array que debe recorrerse en bucle y elemento se usa como un alias para el elemento en el que se itera actualmente.
Los siguientes ejemplos demuestran el bucle de elementos:
Ejemplo 1: en este ejemplo, la lista se itera y se muestra.
index.html
<html>
<head>
<script src=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script>
</head>
<body>
<div id='parent'>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>Friends of Mine!</h3>
<ol>
<li v-for='friend in friends'>
<strong>{{friend}}</strong>
</li>
</ol>
</div>
<script src='app.js'></script>
</body>
</html>
app.js
const parent = new Vue({
el: '#parent',
data: {
friends: [
'Vikash', 'Deepak', 'Mukesh',
'Harsh', 'Motiar', 'Raja'
]
}
})
Producción:
Ejemplo 2: En este ejemplo, la lista que contiene objetos se muestra como una tabla.
index.html
<html>
<head>
<script src=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script>
</head>
<body>
<div id='parent'>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>Courses Details!</h3>
<table>
<tr>
<th>Course Id</th>
<th>Course Name</th>
<th>Instructor</th>
</tr>
<tr v-for='Course in Courses'>
<td>{{Course.CourseId}}</td>
<td>{{Course.CourseName}}</td>
<td>{{Course.instructor}}</td>
</tr>
</table>
</div>
<script src='app.js'></script>
</body>
</html>
app.js
const parent = new Vue({
el: '#parent',
data: {
Courses: [
{
CourseId: '100A',
CourseName: 'React.js',
instructor: 'Stphen Grider'
},
{
CourseId: '100B',
CourseName: 'Vue.js',
instructor: 'Maxmillian'
},
{
CourseId: '100C',
CourseName: 'Angular.js',
instructor: 'Maxmillian'
},
{
CourseId: '100D',
CourseName: 'Java',
instructor: 'Tim Buchikka'
},
{
CourseId: '100E',
CourseName: 'web Dev',
instructor: 'Colt Stele'
}
]
}
})
Producción:
Publicación traducida automáticamente
Artículo escrito por hunter__js y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA