¿Cómo escribir y usar for loop en Vue js?

Vue.js es uno de los mejores marcos para JavaScript como ReactJS. El VueJS 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. Si desea crear una aplicación de una sola página, en mi opinión, VueJS es la primera opción. En el campo del desarrollo, puede haber tantos problemas que no se pueden resolver con una sola biblioteca, por lo que VueJS es compatible con otras bibliotecas, por lo que puede hacerlo fácilmente. VueJS es compatible con todos los navegadores populares como Chrome, Firefox, IE, Safari, etc. Puede comparar fácilmente esta biblioteca con sus bibliotecas favoritas.

El concepto Loop en VueJS facilita la ejecución de un conjunto de instrucciones repetidamente mientras alguna condición se evalúa como verdadera. Para repetir una tarea una cantidad fija de tiempo, hacemos uso del ciclo for . Hay diferentes formas de usar un bucle for, que se detallan a continuación:

• Use claves para cada fila: identificador único para cada fila atravesada 
• Sobre un rango for loop: Bucle a través de un índice inicial y final definido.
• Use v-if para definir una condición: solo ejecute el bucle en una determinada condición.
• Usar el filtro para calcular datos : para eliminar ciertos datos antes de ejecutar un bucle for en eso. 
• Use el índice en cada poligonal: Acceso al índice así como a los datos con cada ciclo de bucle.

Sintaxis:

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

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

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 VueJS 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 a la que se muestra a continuación. El usuario del nuevo componente realiza o los cambios de código que realizaremos se realizarán en la carpeta de origen.

Estructura del proyecto

Bucle en rango (1-10):

Ejemplo 1: Crearemos una interfaz de usuario que se ejecute en un bucle para mostrar una lista de números.

Aplicación.vue:

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

Producción:

Tabla de multiplicación

Lazo con llave:

Ejemplo 2 : Crearemos una interfaz de usuario que se ejecute en un bucle con una clave para cada fila.

Aplicación.vue:

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

Salida :

Lista de estructura de datos

Bucle con índice y datos:

Ejemplo 3: en este ejemplo, crearemos una interfaz de usuario que se ejecuta en un bucle para mostrar una lista de datos junto con un índice.

<template>
  <div id="app">  
    <h1 style="color: green">
          GeeksforGeeks
    </h1>
    <h3>
        Javascript frameworks
    </h3>
    <ul>
      <li v-for='(framework,index) in frameworks' :key='framework'>
        <strong> {{index}} --- {{framework}}</strong>
      </li>
    </ul>
  </div>
</template>
  
<script>
  export default {
    name: 'App',
    data () {
      return {
        frameworks: [ 'React', 'Vue', 'Angular',
        'Meteor', 'Ember', 'React Native']
      }
    }
  }
</script>

Producción:

Lista de marcos JS