No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Renderizado de Listas

8/38
Recursos

Aportes 61

Preguntas 9

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

prices: [8400, 7900, 8200, 9000, 9400, 10000, 10200]

pricesWithDays: [
                { day: 'Lunes', value: 8400 },
                { day: 'Martes', value: 7900 },
                { day: 'Miercoles', value: 8200 },
                { day: 'Jueves', value: 9000 },
                { day: 'Viernes', value: 9400 },
                { day: 'Sabado', value: 10000 },
                { day: 'Domingo', value: 10200 },
            ]```

Se utiliza la directiva v-for para recorrer el arreglo.
v-for = 鈥減 in prices鈥
.
Al utilizar esta directiva se recomienda el uso de key, ya que permite identificar de manera un铆voca a cada elemento. Esto permite que si la lista se reordene, modifique o actualice la lista pueda seguir identificando cual es el elemento.
.
Podemos llamar al indice del elemento de la lista:
v-for="(p,i) in prices"

v-for = " (p, i) 鈥"

  • p hace referencia al elemento en s铆
  • i al 铆ndice del elemento.

Pr谩cticamente el v-for es como usar un foreach

Me esta gustando mucho y sobre todo lo voy comprendiendo bien, gracias a estar meta estudiar JS y demas!

html

  <ul>
             <li v-for="p in prices" v-bind:key="p">
                 {{p}}
             </li>
         </ul>
         <ul>
             <li v-for="(d, i ) in dias" v-bind:key="d">
                 {{i}} - {{d}}
             </li>
         </ul>
         <ul>
             <li v-for="(m, i ) in pricesWithDays" v-bind:key="m.day">
                {{i}} : {{m.day}} - el valor fue {{m.value}}
             </li>
         </ul>

js

prices: [8400, 7900, 8200, 9000, 9400, 10000, 10200],
             dias : ['lunes',
                     'martes',
                     'miercoles',
                     'jueves',
                      'viernes',
                      'sabado',
                       'domingo'],
             pricesWithDays: [
                 { day: 'Lunes', value: 8400 },
                 { day: 'Martes', value: 7900 },
                 { day: 'Miercoles', value: 8200 },
                 { day: 'Jueves', value: 9000 },
                 { day: 'Viernes', value: 9400 },
                 { day: 'Sabado', value: 10000 },
                 { day: 'Domingo', value: 10200 },
             ]

8.-Renderizado de Listas

Directiva v-for: es bastante com煤n ya que nos permite renderizar arrays o listas dentro de nuestro html, es decir, nos permite repetir un set de c贸digo HTML en base a los elementos que podamos tener un array.

Cuando usamos un v-for se aconseja usar la propiedad key que le permite a Vue identificar de manera inequ铆voca a cada uno de los elementos, nos permite en caso de que la lista se reordene, modifique o actualice, Vue pueda seguir detectando cual es elemento y no pierda el track de esas dependencias.

Tambi茅n se puede acceder al elemento 铆ndice que representa cada uno de los elementos dentro del array usando como ejemplo: 鈥(p, i) in prices鈥, donde el primer valor representa al elemento en si, y el 2 al 铆ndice de ese elemento.

Un v-for puede mostrar m谩s all谩 de n煤meros o arrays simples, tambi茅n puede haber un array de objetos

pricesWithDays: [
                { day: 'Lunes', value: 8400 },
                { day: 'Martes', value: 7900 },
                { day: 'Miercoles', value: 8200 },
                { day: 'Jueves', value: 9000 },
                { day: 'Viernes', value: 9400 },
                { day: 'Sabado', value: 10000 },
                { day: 'Domingo', value: 10200 },
            ]

Les recomiendo que usen paginas como Mockaroo que te permiten crear datos falsos para evitar crearlos manualmente, aqui un ejemplo:

https://www.mockaroo.com/8527aef0

Excelente clase!!!

    return {
      name:'Bitcoin',
      img:'https://logos-marcas.com/wp-content/uploads/2020/08/Bitcoin-Logo.png',
      changePercent: 0,
      prices : [8400, 7900, 8200, 9000, 9400, 10000, 10200],
      pricesWithDays : [
        {day:'Lunes', value:8400},
        {day:'Martes', value:7900},
        {day:'Miercoles', value:8200},
        {day:'Jueves', value:9000},
        {day:'Viernes', value:9400},
        {day:'Sabado', value:10000},
        {day:'Domingo', value:10200}
      ]
 
    }

Uso de v-for

que wen curso

No estar铆a de mas ver en acci贸n el atributo v-bind
v-bind en el caso del v-for, supongo lo veremos mas adelante. 馃憖

Excelente curso

Interesante como trabajar con Vue

v-for es una directiva que nos permite renderizar array o listas dentro de nuestro HTML.

Cuando usemos v-for es recomendable utilizar dentro la propiedad key, que le permite a Vue identificar de manera univoca cada uno de los elementos.

<li v-for="p in prices" v-bind:key="p">

Otra de las cosas que podemos hacer dentro del v-for es acceder al elemento indice.

Vue JS cada d铆a lo voy aprendiendo m谩s muy buena clase hasta el momento de los mejores cursos que estoy realizando en Platzi

vue.js es la hostia 鉂わ笍

v-for es igual a un for in 馃槈

Estos son los objetos que yo use 馃榿鉁

prices: [35000, 40000, 5000, 41000, 50000],
      pricesWithDays: [
        { day: "Lunes", value: 8400 },
        { day: "Martes", value: 7900 },
        { day: "Miercoles", value: 8200 },
        { day: "Jueves", value: 9000 },
        { day: "Viernes", value: 9400 },
        { day: "Sabado", value: 10000 },
        { day: "Domingo", value: 10200 },
      ]

Renderizado de Listas

Podemos iterar sobre un array con v-for:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Primera Vue</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="app">
    <img v-bind:src="img" v-bind:alt="Bitcoin">
    <h1>
      {{ name }}
      <span v-if="changePercent > 0">馃</span>
      <span v-else>馃く</span>
    </h1>

    <ul>
      <li v-for="(p, index) in prices" v-bind:key="p">
        {{index}} - {{ p }}
      </li>
    </ul>

    <ul>
      <li v-for="(p, index) in pricesWithDays" v-bind:key="p.day">
        {{index}} - {{ p.day }} - {{ p.value }}
      </li>
    </ul>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script src="app.js"></script>
</body>
</html>
new Vue({
  el: '#app',

  data() {
    return {
      name: 'Bitcoin',
      img: 'https://cryptologos.cc/logos/bitcoin-btc-logo.png',
      changePercent: 10,
      prices: [8400, 7900, 8200, 9000, 9400, 10000, 10200],
      pricesWithDays: [
        { day: 'Lunes', value: 8400 },
        { day: 'Martes', value: 7900 },
        { day: 'Miercoles', value: 8200 },
        { day: 'Jueves', value: 9000 },
        { day: 'Viernes', value: 9400 },
        { day: 'Sabado', value: 10000 },
        { day: 'Domingo', value: 10200 },
      ]
    }
  }
});

Tambien podemos usar destructuring

     <ul>
        <li
          v-for="( {day , value} = price, index) in pricesWithDays"
          v-bind:key="day">{{index}} - {{day}} - {{ value }}
      </li>
    </ul>

 pricesWithDays: [
                { day: 'Lunes', value: 8400 },
                { day: 'Martes', value: 7900 },
                { day: 'Miercoles', value: 8200 },
                { day: 'Jueves', value: 9000 },
                { day: 'Viernes', value: 9400 },
                { day: 'Sabado', value: 10000 },
                { day: 'Domingo', value: 10200 },
            ],



Renderizar listas con v-for

La directiva v-for nos permite renderizar arreglos o listas dentro de nuestro HTML, para este ejemplo vamos a declarar una propiedad que contenga un arreglo llamado prices:

new Vue({
  el:'#app',
  data(){
    return{
      name: 'Bitcoin',
      img: 'https://cryptologos.cc/logos/bitcoin-btc-logo.png',
      changePercent: 10,
      prices: [8400, 7900, 8200, 9000, 9400, 1000, 1200],
    }
  }
})

y para poder renderizarlos en el HTML haremos lo siguiente:

<ul>
	<li v-for="price in prices">
	  {{ price }}
	</li>
</ul>

Cuando utilizamos esta directiva, es recomendable utilizar la propiedad key, que le permite identificar de manera 煤nica al elemento:

<ul>
  <li v-for="price in prices" :key="price">
    {{ price }}
  </li>
</ul>

<!-- Esto es lo mismo a que nosotros pongamos -->

<ul>
  <li v-for="price in prices" v-bind:key="price">
    {{ price }}
  </li>
</ul>

otra de las cosas que podemos hacer con el v-for es ingresas al elemento index que representa la posici贸n que esta ocupando el elemento en el arreglo. (Este siempre comienza en 0).

<ul>
  <li v-for="(price, index) in prices" :key="price">
    {{index}} - {{ price }}
  </li>
</ul>

El resultado es:

Dentro de mi v-for podr铆a contener un arreglo de objetos y recorrer cada uno de esos objetos tomando la propiedad que me interesa renderizar, para esto crearemos una nueva propiedad que contenga un arreglo con objetos:

pricesWithDays: [
  {day: 'Lunes', value: 8400},
  {day: 'Martes', value: 7900},
  {day: 'Miercoles', value: 8200},
  {day: 'Jueves', value: 9000},
  {day: 'Viernes', value: 9400},
  {day: 'Sabado', value: 1000},
  {day: 'Domingo', value: 1200},
],

y para renderizarlos usaremos la directiva v-for y con el nombre de la propiedad la recorreremos y los resultados los almacenaremos en una propiedad moment谩nea, para renderizar una propiedad de nuestros objetos lo haremos llamando a nuestra propiedad moment谩nea y con un punto accedemos a las propiedades del objeto:

<ul>
  <li v-for="(price, index) in pricesWithDays" :key="price.day">
    {{index}} - {{price.day}}: {{ price.value }}
  </li>
</ul>

En la directiva key debemos de ponerle valor 煤nica a cada uno de los elementos que se renderizaran, para esto le decimos que con la propiedad day.

El resultado es:

Saludos.
Estamos usando todo en ingles, entonces los nombres de los dias de la semana tambien.

new Vue({
    el: '#app',
    data() {
        return {
            name: 'Bitcoin',
            img: 'https://cryptologos.cc/logos/bitcoin-btc-logo.png',
            changePercent: -10,
            prices: [8400, 7900, 8200, 9000, 9400, 10000, 10200],
            pricesWithDays: [
                { day: 'Monday', value: 8400 },
                { day: 'thursday', value: 7900 },
                { day: 'wednesday', value: 8200 },
                { day: 'tuesday', value: 9000 },
                { day: 'friday', value: 9400 },
                { day: 'saturday', value: 10000 },
                { day: 'sunday', value: 10200 },
            ]
        }
    }
});

Exitos.

Acabo de entender de una manera muy incre铆ble y sencilla el manejo de las directivas para control de flujo, eso me motiva a continuar con m谩s ganas las siguientes clases que est谩n por llegar. Saludos de Lima, Per煤

De hecho, no solo sirve para arrays, tambi茅n se puede iterar objetos con sus keys y values, o iterar objetos con propiedades que a su vez son objetos.

Para el key tambien se puede usar el index que genera el v-for.

<ul>
 	<li v-for="(price, index) in prices" v-bind:key="index">
        	{{ price }}
      	</li>
</ul>

Directiva v-for

Permite renderizar arrays o listas dentro del HTML, permite repetir un set de c贸digo HTML en base a los elementos que podemos tener en un array.

Por ej. Dentro de una lista utilizamos la directiva v-for para representar cada elemento del array de prices con un elemento li de HTML. Para ello dentro de la directiva v-for introducimos p in prices y usamos una expresi贸n para mostrar el valor de p. Es decir, prices es la propiedad dentro de data, mientras que pe es la representaci贸n de cada uno de esos elementos, que 茅sta 煤ltima podr铆a llamarse de cualquier otra manera por ej. price, y simplemente se utiliza una expresi贸n para mostrar ese valor en la vista.

<ul>
      <li v-for="p in prices">
        {{ p }}
      </li>
</ul>

Cuando se utiliza un v-for es aconsejable utilizar la propiedad key, ya que 茅sta le permite a Vue identificar de manera un铆voca cada uno de 茅stos elementos. Permite que en caso de que la lista sufra modificaciones, actualizaciones o se reordene, Vue puede seguir detectando cu谩l es el elemento y no pierda el trackeo de esas dependencias. Para ello utilizamos v-bind para decirle a Vue que la key es p, cada uno de esos precios del array.

<ul>
      <li v-for="p in prices" v-bind:key="p">
        {{ p }}
      </li>
</ul>

Tambi茅n en la directiva v-for podemos acceder al elemento 铆ndice que representa a cada uno de los elementos dentro del array, para ello utilizamos la notaci贸n de par茅ntesis, d贸nde el 1er elemento representa al elemento en s铆, y el 2ndo representa al 铆ndice de ese elemento. Es posible utilizarlo dentro de una expresi贸n o de la forma que se necesite.

<ul>
      <li v-for="(p, i) in prices" v-bind:key="p">
        {{ i }} - {{ p }}
      </li>
</ul>

Un v-for no solo puede mostrar un array de n煤meros o de strings, tambi茅n puede tener un array de objetos. Si p es un objeto, y si necesitamos identificarlo un铆vocamente podemos decirle que tome el valor de la propiedad day, ya que sabemos que tenemos 7 d铆as, y sabemos que no se va a repetir:

<ul>
      <li v-for="(p, i) in pricesWithDays" v-bind:key="p.day">
        {{ i }} - {{ p.day }}- {{ p.value }}
      </li>
</ul>

Es muy 煤til la directiva v-for ya que nos permite representar contenido din谩mico, como una colecci贸n de datos que podemos traer de un servidor o un Rest API.

La directiva v-for nos permite renderizar arrays o listas dentro de HTML, es decir, repetir cierto c贸digo HTML en base a los elementos de un array/lista.

Tiene un comportamiento similar al de for-in.

Cuando se usa esta directiva es recomendable usar la propiedad key para que cada elemento ese identificado. Esto sirve para que, en caso de que la lista se modifique, Vue pueda seguir detectando cu谩l es el elemento y mantener el seguimiento.

Tambi茅n puedes obtener el index de cada elemento a帽adiendo un parentesis, donde el primer valor es el elemento en s铆 y el segundo el index del elemento.

no me quedo claro la parte de ** v-bind:key=p**

listas

<code>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <div id="app">
        <img v-bind:src="img" v-bind:alt="name">
        <h1>
            {{ name }}
            <span v-if="changePercent > 0">Mayor a cero</span>
            <span v-else-if="changePercent < 0">menor a cero</span>
            <span v-else>uuuu</span>
            
            <span v-show="changePercent > 0">馃憤</span>
            <span v-show="changePercent < 0">dislike</span>
            <span v-show="changePercent == 0">aaaa</span>
        </h1>
        
        <ul>
            <li v-for="(p, i) in prices" v-bind:key="p">
                {{i}} - {{p}}
            </li>
        </ul>

        <ul>
            <li v-for="(p, i) in pricesWithDays" v-bind:key="p.day">
                {{i}} - {{p.day}} - {{p.value}}
            </li>
        </ul>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
</html>
</code>

el v-for nos permite peque帽os componentes y asi manupularlos como queramos en la aplicacion

un v-for puede recorrer arrays de objetos

v-for(v,i) donde i es el idice y v es el valor en si

la propiedad key en vue, nos permite que si se reordena o sufre algun cambio y vue puede identificar el elemento en el dom

v-for nos permite recorrer los datos

la directiva v-for como su nombre lo indica es una directiva q nos permite iterar arreglos simples y arreglos de objetos.

Directivas de renderizado de listas

    - v-for nos permite iterar sobre elementos de un array
    - key va junto con v-for, le permite a vue identificar de manera uniboca a cada uno de los elementos
      va junto con v-bind, por ejemplo v-bind:key="index"
    - Puede utilizarse tambien el indice, por ejemplo:
      v-for="(objeto, indice) in arreglo"

Podemos usar la directiva v-for para recorrer un array, ejemplo:

<li v-for="(price, index) in prices"> {{ price }} - {{ index }} </li>

price => Valor de cada item del array
index => Indice de cada elemento en el array

v-if="(valor, inedex) in array_de_valores"

  • valor = valor de una iteraci贸n de array_de_valores
  • index = la posici贸n de ese valor en el array
  • array_de_valores = la propiedad que estoy iterando, la cual es un array

Excelente clase 馃挭馃挭

prices: [2345, 3243, 46665, 35453, 34534, 5644]

Me esta gustando mucho Vue

Para que nuestros renderizado delista sea adecuado y mantenible es recomendado usar v-bind:key=鈥渋d.item鈥, esto es una buena practica que recomineda la documentacion de Vue.js en proyectos peque#os esto no afecta en lo absoluto, pero si estas trabajando en un proyecto a gran escala es de gran importancia para el mantenimiento y mejor renderizado de nuestro codigo

new Vue({
  el: '#app',

  data() {
    return {
      name: 'Bitcoin',
      img: 'https://cryptologos.cc/logos/bitcoin-btc-logo.png',
      changePercent: 10,
      prices: [8400, 7900, 8200, 9000, 9400, 10000, 10200],
      pricesWithDays: [
        { day: 'Lunes', value: 8400 },
        { day: 'Martes', value: 7900 },
        { day: 'Miercoles', value: 8200 },
        { day: 'Jueves', value: 9000 },
        { day: 'Viernes', value: 9400 },
        { day: 'Sabado', value: 10000 },
        { day: 'Domingo', value: 10200 },
    ]
    }
  }
})

La directiva v-for nos permite iterar sobre elementos en un array y es muy com煤n el uso porque nos permite crear peque帽os componentes que vamos a repetir a lo largo de nuestra vista en base a la cantidad de elementos que tengamos en un array.

La directiva v-for, tambi茅n es muy 煤til porque nos permite representar contenido din谩mico por ejemplo una colecci贸n de datos que podemos traer de una API REST.

El key de la primera iteraci贸n debe ser el indice, y no la variable que guarda el valor del ciclo for. El precio se puede repetir en el array, a diferencia del indice que siempre ser谩 煤nico. 馃槉

<ul>
<li v-for=" (p, i) in prices" :key=鈥'i" >{{ p }}</li>
</ul>

v-for es al directiva de bucle que recorre como un foreach elemento por elemento dentro de un array de elementos estos pueden ser objetos.

v-for =" (p, index) in products" :key="p.name"

aqui lo necesario

 prices: [8400, 7900, 8200, 9000, 9400, 10000, 10200],
      pricesWithDays: [
        { day: 'Lunes', value: 8400 },
        { day: 'Martes', value: 7900 },
        { day: 'Miercoles', value: 8200 },
        { day: 'Jueves', value: 9000 },
        { day: 'Viernes', value: 9400 },
        { day: 'Sabado', value: 10000 },
        { day: 'Domingo', value: 10200 },
    ]```

en el ejemplo

  • v-for="p in price">{{p}}
  • en general <etiqueta>v-for="(representacion) in (propiedad)">{{(representacion)}}</etiqueta>

    excelente

    Me puse a probar un poco y me d铆 cuenta de que se puede usar la destructuraci贸n de objetos ES6+.

    <li v-for="{value,day} in pricesWithDays" :key="price">{{ `${day} -- $${value} ` }}</li>
    

    Por qu茅 uso p.day para asignarlos a key?
    Osea que cuando nos entren valores din谩micos, tendremos que pensar en un valor en nuestros objetos que sea est谩tico y no cambie.

    Hace poco ten铆a un problema, ten铆a un array de im谩genes as铆:
    miArray = [ { url: 鈥榰rl1鈥, order: 0 }, { url: 鈥榰rl2鈥, order: 2 }, { url: 鈥榰rl3鈥, order: 1 }] los cuales ten铆a que renderear de acuerdo a su orden. No supe c贸mo hacer, as铆 que le dije al desarrollador backend que me los mandara en orden. Pero esto me dej贸 una pregunta: Existir谩n situaciones en que el v-for no renderee en el orden del array? (De hecho, 茅sa fue la raz贸n por la que el backend le puse un 鈥榦rder鈥 a esos objetos del array)

    Muy util para hacer listas din谩micas y que necesiten de forma constante estar cargando