Vue.js List Rendering v-for con v-if

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. A veces, el usuario requiere que los datos se muestren en una determinada condición. Aquí es cuando v-if es útil. Ejecuta el ciclo solo si una determinada condición es verdadera. Según el valor booleano, se establece la respuesta de la interfaz de usuario. Esto viene bajo la parte de » Representación condicional de Vue JS «.

Sintaxis:

<ul v-if="condition" >
    <li v-for="condition">
        Content
        .......
    <li>
</ul>

Enfoque: Aquí, crearemos un proyecto Vue y luego crearemos una interfaz de usuario diferente que use v-if.

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: ejecutar un bucle para mostrar una lista de valores de string. El bucle solo se ejecutará si el valor de impresión es verdadero. Se establece una condición usando el v-if. 

<template>
  <div id="app">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <ul v-if="print">
      <h3>v-if set to true</h3>
      <strong>
          Print all element in list
      </strong>
      <li v-for="(structure, index) in data_structures" :key="index">
        <strong>
            {{ structure }}
        </strong>
      </li>
    </ul>
    <ul v-if="!print">
      <h3>v-if set to false</h3>
    </ul>
  </div>
</template>
  
<script>
  export default {
    name: "App",
    data() {
      return {
        print: true,
        data_structures: [
          "Array",
          "Linked-list",
          "Stack",
          "Queue",
          "Heap",
          "Tree",
        ],
      };
    },
  };
</script>

Salida: Puede ver la salida para ambos casos.

• Cuando la variable de impresión se establece en verdadero:

Establecer el valor de v-if en verdadero

• Cuando la variable de impresión se establece en falso:

Establecer el valor de v-if en falso

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