Directivas: v-if v-for v-bind v-on
Renderice condicionalmente con v-if y v-show, recorra elementos con v-for, vincule atributos dinámicamente con v-bind y escuche eventos del DOM con v-on.
Directivas: v-if v-for v-bind v-on es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué son las directivas de Vue?
Las directivas son atributos especiales con el prefijo v- que indican a Vue que haga algo con un elemento del DOM. Se evalúan como expresiones de JavaScript y reaccionan a los cambios en los datos reactivos.
v-if, v-else-if, v-else
v-if renderiza condicionalmente un elemento según una expresión verdadera. Cuando la expresión es falsa, el elemento se elimina por completo del DOM. v-else proporciona la alternativa.
<div v-if="isLoggedIn">
<UserDashboard />
</div>
<div v-else-if="isLoading">
<Spinner />
</div>
<div v-else>
<LoginForm />
</div>v-show — Alternar la visibilidad
v-show alterna la propiedad CSS display: none en lugar de agregar o eliminar el elemento del DOM. Use v-show cuando el elemento cambie de estado con frecuencia; use v-if cuando la condición cambie pocas veces.
<!-- Good for frequently toggling: -->
<div v-show="isDropdownOpen">...</div>
<!-- Good for rarely changing: -->
<div v-if="userHasPremium">...</div>v-for — Renderizar listas
v-for="item in items" renderiza el elemento para cada elemento de la lista. Incluya siempre :key para garantizar actualizaciones estables.
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }} — {{ user.email }}
</li>
</ul>
<!-- With index: -->
<li v-for="(item, index) in items" :key="item.id">
{{ index + 1 }}. {{ item.title }}
</li>v-for con objetos
Puede iterar sobre los valores de un objeto o sobre pares clave-valor.
<dl>
<template v-for="(value, key) in user" :key="key">
<dt>{{ key }}</dt>
<dd>{{ value }}</dd>
</template>
</dl>v-bind — Enlazar atributos
v-bind:attr o su abreviatura :attr enlaza dinámicamente un atributo HTML a un valor reactivo.
<img :src="user.avatar" :alt="user.name">
<a :href="getLink(post.id)">{{ post.title }}</a>
<button :disabled="isLoading" :class="{ active: isActive }">Save</button>Sintaxis de objeto de v-bind
Enlace varios atributos a la vez mediante un objeto.
<input v-bind="{
type: 'email',
placeholder: 'Enter email',
disabled: isSubmitting
}">Enlace de clases: :class
Enlace clases CSS condicionalmente mediante un objeto (la clave = nombre de la clase, el valor = condición) o una matriz.
<div :class="{ 'is-active': isActive, 'has-error': hasError }">...</div>
<!-- Array syntax: -->
<div :class="[baseClass, isActive ? 'active' : '']">
<!-- Dynamic in script setup: -->
:class="{ card: true, [variantClass]: true }"Enlace de estilos: :style
Enlace estilos en línea mediante un objeto en camelCase.
<div :style="{ backgroundColor: brandColor, padding: spacing + 'px' }">v-on — Escuchar eventos
v-on:event o su abreviatura @event agrega listeners de eventos.
<button @click="handleClick">Click Me</button>
<input @input="value = $event.target.value">
<form @submit.prevent="handleSubmit">...</form>Modificadores de eventos
Vue proporciona modificadores de eventos integrados: .prevent (preventDefault), .stop (stopPropagation), .once (se ejecuta una vez), .self (solo si el destino es el propio elemento) y .passive (mejora el rendimiento del desplazamiento).
<form @submit.prevent="submit">
<button @click.stop="selectItem">
<div @click.self="closeModal">
<div @scroll.passive="onScroll">Comprobación rápida
¿Cuándo debería usar v-show en lugar de v-if?
Repaso: directivas de Vue
v-if elimina o agrega elementos al DOM. v-show alterna display. v-for renderiza listas (incluya siempre :key). v-bind (:) enlaza atributos, :class y :style. v-on (@) agrega listeners de eventos. Modificadores de eventos .prevent, .stop y .once. v-model permite el enlace bidireccional (combina v-bind:value y v-on:input).
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 41
- Lecciones
- 163
Preguntas frecuentes
¿La lección «Directivas: v-if v-for v-bind v-on» es gratis?
Sí — el texto completo de «Directivas: v-if v-for v-bind v-on» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Directivas: v-if v-for v-bind v-on»?
Renderice condicionalmente con v-if y v-show, recorra elementos con v-for, vincule atributos dinámicamente con v-bind y escuche eventos del DOM con v-on. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Directivas: v-if v-for v-bind v-on»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Vue SFC: script template style
- Options API: data methods computed
- Directivas: v-if v-for v-bind v-on
- Props y emits de componentes