Vinculación de atributos y clases
Vincule atributos, clases y estilos dinámicamente
Vinculación de atributos y clases es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 3. 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 3 lecciones en total.
Vinculación de clases y estilos
Una necesidad habitual es cambiar la clase o el estilo de un elemento según su estado.
Vue trata especialmente :class y :style para que pueda pasarles objetos y matrices, no solo cadenas.
Sintaxis de objeto de :class
Pase un objeto a :class. Las claves son nombres de clases; los valores verdaderos las incluyen.
<div :class="{ active: isActive, disabled: isDisabled }">
Status box
</div>
<!-- if isActive is true, the "active"
class is applied -->Combinar clases estáticas y dinámicas
Un atributo class estático y un :class dinámico se combinan.
<div class="card" :class="{ highlighted: isSelected }">
Always has "card";
adds "highlighted" when selected.
</div>Sintaxis de matriz de :class
Pase una matriz para aplicar una lista de clases.
<div :class="[baseClass, themeClass]">Box</div>
<!-- data:
baseClass = "panel"
themeClass = "dark" -->Condicionales en el array
Puede combinar expresiones condicionales dentro del array.
<div :class="[isActive ? 'active' : '', errorClass]">
...
</div>
<!-- or nest an object inside the array -->
<div :class="[baseClass, { active: isActive }]">
...
</div>Vinculación de estilos en línea
La directiva :style vincula estilos en línea mediante un objeto.
Use nombres de propiedades en camelCase, como fontSize.
<p :style="{ color: textColor, fontSize: size + 'px' }">
Styled text
</p>
<!-- data: textColor = "red", size = 18 -->:style con un array
Puede pasar un array de objetos de estilos, y Vue los combina.
<div :style="[baseStyles, overrideStyles]">
Merged styles
</div>Prefijado automático
Cuando una propiedad CSS necesita prefijos de proveedor, Vue puede agregarlos automáticamente cuando el navegador los admite.
- Usted escribe la propiedad estándar
- Vue aplica el prefijo adecuado si es necesario
Esto mantiene limpias las vinculaciones de estilos.
Vinculación dinámica de atributos
Cualquier atributo puede vincularse dinámicamente con :attr.
<img :src="photoUrl" :alt="photoCaption" />
<input :placeholder="hintText" :maxlength="limit" />
<a :href="link" :target="openInNewTab ? '_blank' : '_self'">Go</a>Atributos booleanos
En el caso de atributos booleanos como disabled, Vue incluye el atributo únicamente cuando el valor es verdadero.
<button :disabled="isSubmitting">Submit</button>
<!-- if isSubmitting is false,
the disabled attribute is removed -->Vinculación condicional de varias clases
Un ejemplo práctico que alterna varias clases a la vez.
<li
class="todo"
:class="{
done: task.completed,
overdue: task.isLate,
priority: task.urgent
}"
>
{{ task.title }}
</li>Comprobación rápida
Compruebe sus conocimientos sobre las vinculaciones de clases y estilos.
Repaso: vinculaciones de atributos y clases
Ha aprendido sobre las vinculaciones dinámicas:
- La sintaxis de objeto de :class alterna clases según el valor de verdad
- La sintaxis de array de :class aplica una lista
- :style vincula estilos en línea mediante claves en camelCase
- Cualquier atributo puede vincularse con :attr
- Los atributos booleanos aparecen únicamente cuando el valor es verdadero
A continuación: conceptos básicos de los componentes y comunicación entre ellos.
Preguntas frecuentes
¿La lección «Vinculación de atributos y clases» es gratis?
Sí — el texto completo de «Vinculación de atributos y clases» 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 3 lecciones en total.
¿Qué aprenderé en «Vinculación de atributos y clases»?
Vincule atributos, clases y estilos dinámicamente 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 3.
¿Cuánto tiempo toma la lección «Vinculación de atributos y clases»?
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
- Interpolación y directivas
- Condicionales y bucles
- Vinculación de atributos y clases