Vue.js List Rendering v-for en una <plantilla>

Vue.js es uno de los mejores marcos para JavaScript como React JS. El Vue JS se utiliza para diseñar la capa de interfaz de usuario, es fácil de aprender para cualquier desarrollador. También es compatible con otras bibliotecas y extensiones.

Para repetir una tarea durante un tiempo fijo, hacemos uso del bucle for . Hay una gran cantidad de datos que deben representarse en una página web. El v-for se usa para recorrer los datos y mostrar los datos requeridos. Puede utilizar la etiqueta <plantilla> para mostrar datos a través de bucles. La etiqueta <template> no se representa, pero sí el contenido que contiene. Por lo tanto, tiene elementos menores en su contenido web. 

Sintaxis:

<template v-for="item in items">
    {{ item }}
</template>

Enfoque: Aquí, crearemos un proyecto Vue y luego crearemos una interfaz de usuario diferente que muestre datos de bucle a través de v-for dentro de una plantilla.

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 podrá ver 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: este ejemplo ilustra el v-for de representación de lista en una <plantilla> en VueJS.

<template>
  <div id="app">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <h2>v-for on a < template ></h2>
    <template v-for="(value, key) in object">
      <strong>
          {{ key }}- {{ value }}
      </strong>
      <br />
    </template>
  </div>
</template>
  
<script>
  export default {
    name: "App",
    data() {
      return {
        object: {
          Site: " Geeks for Geeks ",
          Framework: " Vue ",
          Type: " Article ",
          Subject: " v-for on a <template> ",
        },
      };
    },
  };
</script>

Salida: puede ver la salida junto con el código en la consola. No hay una etiqueta de plantilla en los elementos de la consola. Puede ver que solo el contenido dentro de la plantilla se representa en el DOM. 

Bucle en la etiqueta de la plantilla

Referencia : https://v2.vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt