Representación de la lista de Vue.js

Vue.js es un marco progresivo para crear 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.

Hay una gran cantidad de datos que deben representarse en una página web. A veces, los datos que vienen en forma de array deben modificarse o mostrarse varias veces en consecuencia, o, a veces, los datos deben representarse en forma de lista para organizar el contenido. List Rendering facilita los diversos formatos de listado al implementar los diferentes conceptos de bucle, que se pueden usar para repetir una tarea particular por un número específico de veces. Hay diferentes formas de representar una lista en Vue js usando los bucles for, que se describen a continuación:

• Asignación de una array a elementos con v-for : v-for se usa para recorrer cualquier lista.
• v-for with an Object : Recorra el objeto y muestre los datos requeridos.
• Estado de mantenimiento : mantenimiento de un atributo clave único para que cada elemento de bucle realice un seguimiento.
• Métodos de mutación : diferentes métodos como ordenar, invertir, etc. para mutar o transformar la array original.
• Métodos sin mutación : siempre devuelve una nueva array con métodos como filter, concat y slice.
• v-for con un rango : ejecuta el ciclo a un índice específico, es decir, un ciclo a través de un índice inicial y final definido. 
• v-for en una plantilla : puede utilizar la etiqueta <template> para mostrar datos a través de bucles. 
• v-for con v-if : ejecuta el ciclo solo si una determinada condición es verdadera (Representación condicional).
• v-for con un componente : Muestra el componente requerido tantas veces como sea necesario.

Enfoque: aquí, crearemos un proyecto de Vue y luego crearemos una interfaz de usuario diferente que mostrará una representación de lista diferente en Vue.

Crear proyecto Vue :

Paso 1: para crear una aplicación Vue, debe instalar módulos Vue con este comando npm. Debe asegurarse de tener el Node instalado previamente.

npm install vue

Paso 2 : use Vue JS a través de CLI. Abra su terminal o símbolo del sistema y ejecute el siguiente comando.

npm install --global vue-cli

Paso 3 : Ejecute el siguiente comando para crear el proyecto.

vue init webpack myproject

Paso 4:  después de crear su proyecto Vue, muévase a la carpeta para realizar diferentes operaciones.

cd myproject

Paso para ejecutar la aplicación : Abra la terminal y escriba el siguiente comando.

npm run dev

Abre tu navegador. Abra una pestaña con localhost ejecutándose (http://localhost:8080/) y vea el resultado que se muestra en la imagen.

Estructura del proyecto : después de ejecutar los comandos (mencionados en los pasos anteriores), si abre el proyecto en un editor, puede ver una estructura de proyecto similar (como se muestra a continuación).

Estructura del proyecto

Ejemplo 1 : en este ejemplo, mostraremos los diferentes métodos de mutación en Vue.js y cómo el usuario usa v-for para mostrar la lista.

<template>  
  <div id="app">  
    <h1 style="color: green">GeeksforGeeks </h1>
    <h3>Initial Array : {{numbers}} </h3>
    <h3> Splice array Index - (0,3) : {{splice(numbers)}}</h3>
    <h3> Reverse the array : {{reverse(numbers)}}</h3>
    <h3>Sort the Array : {{sort(numbers)}}</h3>
    <h3> Shift array : {{shift(numbers)}} </h3>
    <h3> Pop last 2 element : {{pop(numbers)}} </h3>
  </div>
</template>
  
<script>
  export default {
    name: 'App',  
    data () {
      return {
        numbers: [10,20,90,200,100]
      }
    },
    methods: {
     sort(numbers) { return [...numbers].sort((a, b) => a - b) },
     reverse(numbers) { return    [...numbers].reverse() },
     splice(numbers) { return [...numbers].splice(0,3)},
     shift(numbers) {let d=[...numbers]; d.unshift(); return d;},
     pop(numbers) {  let d=[...numbers]; d.pop(); d.pop(); return d; }
     }
  }
</script>

Salida :

Lista de métodos de mutación de representación

Ejemplo 2 : Este ejemplo ilustra v-for con un objeto mientras asigna una clave única a cada elemento del bucle, manteniendo así el estado.

<template>
  <div id="app">
    <h1 style="color: green">GeeksforGeeks</h1>
    <strong> 
        Print all key , values of an object along with index
    </strong><br />
    <p v-for="(value, key, index) in object">
      <strong>
          {{ index }}.   {{ key }}   - {{ value }} 
      </strong>
    </p>
  
  </div>
</template>
  
<script>
  export default {
    name: "App",
    data() {
      return {
        object: {
          Site: " Geeks for Geeks ",
          Framework: " Vue ",
          Type: "GFG Article ",
          Subject: " List Rendering in Vue ",
        },
      };
    },
  };
</script>

Salida :

Representación de la lista de objetos

Referencia : https://v2.vuejs.org/v2/guide/list.html