Vue3 Condicionales

En Vue 3, puedes usar múltiples sentencias condicionales en la plantilla para controlar el renderizado de los componentes.

Las principales sentencias condicionales sonv-if、v-else-if、v-elseyv-show, a continuación se muestran sus usos y diferencias:

  • v-if: el elemento, cuando la condición esfalseno se renderiza en el DOM, adecuado para situaciones donde la condición no cambia con frecuencia.
  • v-show: el elemento siempre se renderiza en el DOM; adecuado para situaciones donde la condición cambia con frecuencia, y el rendimiento al alternar entre mostrar y ocultar es mejor.
  • v-else-ifyv-else: se utiliza para manejar múltiples ramas condicionales, junto conv-ifse usa.

Condicionales

v-if

Renderiza elementos condicionalmente según el valor de verdad de la expresión. Si la expresión es verdadera, se renderiza el elemento; si es falsa, no se renderiza (el elemento no se genera en el DOM).

La sentencia condicional utiliza la directiva v-if; el elemento se muestra solo cuando la expresión de la directiva devuelve true:

Directiva v-if

Usando la directiva v-if en un elemento:

<div id="app"> <p v-if="seen">Ahora me ves</p> </div> <script>const app = { data() { return { seen: true /* cámbialo a false para que el mensaje no se muestre */ } } } Vue.createApp(app).mount('#app')</script>

Pruébalo »

Aquí, la directiva v-if decidirá si se inserta el elemento <p> según el valor de la expresión `seen` (true o false).

Debido a que v-if es una directiva, debe agregarse a un elemento. Si son varios elementos, se pueden envolver en un elemento <template> y usar v-if en él. El resultado final del renderizado no incluirá el elemento <template>.

Directiva v-if

Usando la directiva v-if en un elemento <template>:

<div id="app"> <template v-if="seen"> <h1>Sitio web</h1> <p>Google</p> <p>Ejemplo</p> <p>Taobao</p> </template> </div> <script>const app = { data() { return { seen: true /* cámbialo a false para que el mensaje no se muestre */ } } } Vue.createApp(app).mount('#app')</script>

Pruébalo »

v-else

Se usa junto con v-if; representa el elemento que se renderiza cuando la expresión del v-if anterior es falsa.

Puedes usar la directiva v-else para añadir un bloque "else" a v-if:

Directiva v-else

Genera un número aleatorio, determina si es mayor que 0.5 y luego muestra el mensaje correspondiente:

<div id="app"> <div v-if="Math.random() > 0.5">El número aleatorio es mayor que 0.5</div> <div v-else>El número aleatorio es menor o igual que 0.5</div> </div> <script> Vue.createApp().mount('#app') </script>

Pruébalo »

v-else-if

Para agregar condiciones adicionales entre v-if y v-else, puedes usar varios v-else-if consecutivamente.

Directiva v-else

Determina el valor de la variable type:

<div id="app"> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> </div> <script> const app = { data() { return { type: "C" } } } Vue.createApp(app).mount('#app') </script>

Pruébalo »

v-else y v-else-if deben ir después de v-if o v-else-if.

v-show

Muestra u oculta elementos condicionalmente según el valor de verdad de la expresión. A diferencia de v-if, v-show siempre conserva el elemento en el DOM; solo controla la visibilidad del elemento mediante la propiedad CSS display.

También podemos usar la directiva v-show para mostrar elementos según una condición:

Directiva v-show

<h1 v-show="ok">Hello!</h1>

Pruébalo »

Si necesitas alternar con frecuencia la visibilidad de un elemento, se recomienda usar v-show, ya que simplemente cambia el estilo CSS en lugar de volver a renderizar todo el elemento.

Otras extensiones