Bindings dinámicos y múltiples con v-bind
Nombres de atributos dinámicos :[dynamicAttr], sintaxis de objeto de v-bind y binding de varios atributos a la vez.
Bindings dinámicos y múltiples con v-bind es una lección gratuita de Vue 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 Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Vinculación dinámica de atributos
La directiva v-bind (abreviada como :) vincula un atributo HTML a un valor reactivo. Permite usar clases y estilos dinámicos, e incluso atributos con nombres dinámicos.
v-bind básico
Vincule cualquier atributo a una expresión. Cuando cambia el valor, Vue actualiza el atributo.
<img :src="imageUrl" :alt="description" />Vinculación de clases: sintaxis de objeto
Para las clases, la sintaxis de objeto activa o desactiva una clase según un valor que se evalúe como verdadero. La clave es el nombre de la clase y el valor determina si se aplica.
<div :class="{ active: isActive, disabled: isDisabled }"></div>Vinculación de clases: sintaxis de array
La sintaxis de array aplica una lista de clases. Combine cadenas estáticas y variables reactivas, o anide un objeto para las entradas condicionales.
<div :class="[baseClass, isActive ? activeClass : '']"></div>Combinación de arrays y objetos
Puede anidar la forma de objeto dentro del array para obtener lo mejor de ambos: clases siempre activas junto con clases condicionales.
<div :class="[baseClass, { active: isActive }]"></div>Vinculación de estilos: sintaxis de objeto
Vincule estilos en línea mediante un objeto. Use nombres de propiedades en camelCase (o kebab-case entre comillas). Los valores pueden ser reactivos.
<div :style="{ color: textColor, fontSize: size + 'px' }"></div>Vinculación de estilos: array de objetos
Pase un array de objetos de estilo para combinar varias fuentes de estilos, como un estilo base y una sobrescritura del tema.
<div :style="[baseStyles, overrideStyles]"></div>Vinculación de muchos atributos a la vez
v-bind sin argumento extiende sobre el elemento un objeto completo de atributos. Cada clave se convierte en un atributo.
<script setup>
const attrs = { id: 'main', class: 'box', 'data-role': 'panel' }
</script>
<template>
<div v-bind="attrs"></div>
</template>Nombres de atributos dinámicos
Use corchetes para calcular el propio nombre del atributo durante la ejecución. La expresión entre corchetes se evalúa y se utiliza como clave del atributo.
<script setup>
const attrName = 'title'
const attrValue = 'Hello'
</script>
<template>
<div :[attrName]="attrValue"></div>
</template>Cuándo usar cada sintaxis
- Sintaxis de objeto para clases — activar o desactivar varias clases según una condición.
- Sintaxis de array para clases — combinar una clase base con clases condicionales.
v-bind="obj"— reenviar un conjunto completo de atributos.- Nombre dinámico
:[name]— cuando la clave del atributo se decide durante la ejecución.
Un ejemplo combinado
Este elemento usa una clase dinámica, un estilo dinámico y atributos extendidos a la vez; todo es reactivo.
<div
:class="[base, { active: isActive }]"
:style="{ color: textColor }"
v-bind="extraAttrs"
></div>Comprobación rápida
Compruebe sus conocimientos sobre v-bind.
Repaso
Ha aprendido todo el alcance de v-bind:
- La sintaxis de objeto para clases activa o desactiva clases según una condición; la sintaxis de array las combina.
- La vinculación de estilos usa objetos (camelCase) o arrays de objetos.
v-bind="obj"extiende todos los atributos de un objeto.:[name]="val"vincula un atributo con nombre dinámico.
Preguntas frecuentes
¿La lección «Bindings dinámicos y múltiples con v-bind» es gratis?
Sí — el texto completo de «Bindings dinámicos y múltiples con v-bind» 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 Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Bindings dinámicos y múltiples con v-bind»?
Nombres de atributos dinámicos :[dynamicAttr], sintaxis de objeto de v-bind y binding de varios atributos a la vez. Practicas Vue 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 Vue Academy?
No se requiere experiencia previa. Vue 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 «Bindings dinámicos y múltiples con v-bind»?
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 Vue Academy?
Sí. Cada lección de Vue 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
- v-model: aspectos internos del binding bidireccional
- Modificadores de eventos de v-on
- Bindings dinámicos y múltiples con v-bind
- Creación de directivas personalizadas