Vue.js List Rendering v-for con un rango

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. Vue JS es compatible con todos los navegadores populares como Chrome, Firefox, IE, Safari, etc. 

Hay una gran cantidad de datos que deben representarse en una página web. A veces, el usuario requiere que se muestren los datos para el rango especificado. Aquí es cuando v-for es útil. Ejecuta el bucle a un índice especificado, es decir, un bucle a través de un índice inicial y final definido.

Sintaxis:

<li v-for="index in end-limit" >
    {{index}}
</li>

Enfoque: Aquí, crearemos un proyecto Vue y luego crearemos una interfaz de usuario diferente que use el bucle for con un rango.

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

El siguiente ejemplo ilustrará el uso de v-for con un rango.

Ejemplo 1: Bucle en un rango del índice 1 al índice 10. Use solo el índice para un rango específico. 

<template>
  <div id="app">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>10's Multiplication table</h3>
    <ul>
      <li v-for="index in 10" :key="index">
        <strong>10 * {{ index }} =
        {{ index * 10 }}</strong>
      </li>
    </ul>
  </div>
</template>
  
<script>
  export default {
    name: "App",
  };
</script>

Producción:

Bucle con rango 1-10

Ejemplo 2: uso de un índice para acceder a un elemento de los datos dentro del rango especificado. index -1 ya que está indexado en 1. 

<template>
  <div id="app">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>First 5 Data Structure</h3>
    <ul>
      <li v-for="index in 5" :key="index">
        <strong>
            {{ data_structures[index - 1] }}
        </strong>
      </li>
    </ul>
  </div>
</template>
  
<script>
  export default {
    name: "App",
    data() {
      return {
        data_structures: [
          "Array",
          "Linked-list",
          "Stack",
          "Queue",
          "Heap",
          "Tree",
        ],
      };
    },
  };
</script>

Producción:

Bucle con rango 1-5

Ejemplo 3: En este ejemplo, estamos extrayendo los últimos 3 elementos de una lista accediendo a los elementos sin usar el índice pero cortando los datos. Podemos dividir los datos para ejecutar el ciclo según el requisito.   

<template>
  <div id="app">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <h3>Last 3 Data Structure</h3>
    <ul>
      <li
        v-for="(structure, index) in data_structures.slice(
          data_structures.length - 3,
          data_structures.length)":key="index">
        <strong>
            {{ structure }}
        </strong>
      </li>
    </ul>
  </div>
</template>
  
<script>
  export default {
    name: "App",
    data() {
      return {
        data_structures: [
          "Array",
          "Linked-list",
          "Stack",
          "Queue",
          "Heap",
          "Tree",
        ],
      };
    },
  };
</script>

Producción:

Recorre los últimos 3 elementos

Referencia: https://v2.vuejs.org/v2/guide/list.html#v-for-with-a-Range