Vinculación dinámica de clases CSS
En Vue.js, la directiva :class (abreviatura de v-bind:class) permite manipular las clases de un elemento de forma reactiva. Existen varias estrategias para aplicar estilos condicionales, desde expresiones simples hasta el uso de propiedades computadas para lógicas más complejas.
A continuación, se presenta un ejemplo que integra el uso de objetos, arrays y lógica computada para gestionar clases dinámicamente:
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Demo de Clases Dinámicas</title>
<style>
.borde-primario { border: 2px solid #2c3e50; }
.fondo-exito { background-color: #2ecc71; }
.texto-grande { font-size: 24px; }
.deshabilitado { opacity: 0.5; cursor: not-allowed; }
</style>
</head>
<body>
<div id="app">
<!-- Uso de sintaxis de objeto: la clase se aplica si el valor es verdadero -->
<p :class="{ 'fondo-exito': estadoActivo, 'texto-grande': resaltar }">
Vinculación mediante objetos
</p>
<!-- Uso de sintaxis de array para combinar múltiples clases -->
<p :class="[claseBorde, 'texto-grande']">
Vinculación mediante arrays
</p>
<!-- Clase calculada mediante una propiedad computada -->
<p :class="configuracionClases">
Clases gestionadas por Computed
</p>
<button @click="alternarEstado">Alternar Estado</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
estadoActivo: true,
resaltar: false,
claseBorde: 'borde-primario'
};
},
computed: {
configuracionClases() {
return {
'fondo-exito': this.estadoActivo,
'deshabilitado': !this.estadoActivo
};
}
},
methods: {
alternarEstado() {
this.estadoActivo = !this.estadoActivo;
}
}
}).mount('#app');
</script>
</body>
</html>
Vinculación de estilos en línea
La directiva :style permite asignar estilos CSS directamente a los elementos utilizando datos del componente. Vue transforma automáticamente los nombres de propiedades de camelCase a kebab-case en el DOM resultante y ofrece soporte para prefijos de navegador automáticos.
Este ejemplo demuestra cómo aplicar estilos individuales, objetos de estilo y combinaciones mediante arrays:
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Demo de Estilos Dinámicos</title>
</head>
<body>
<div id="app">
<!-- Asignación directa de un objeto de estilo -->
<p :style="{ color: colorPersonalizado, fontSize: tamanoFuente + 'px' }">
Estilo definido en línea
</p>
<!-- Vinculación con un objeto de datos -->
<div :style="contenedorEstilos">
Caja con estilos desde objeto
</div>
<!-- Combinación de múltiples objetos de estilo mediante un array -->
<p :style="[baseEstilo, estiloDestacado]">
Estilos combinados con arrays
</p>
<button @click="aumentarFuente">Aumentar tamaño</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
colorPersonalizado: '#e74c3c',
tamanoFuente: 18,
contenedorEstilos: {
padding: '20px',
backgroundColor: '#ecf0f1',
borderRadius: '8px'
},
baseEstilo: {
fontWeight: 'bold'
},
estiloDestacado: {
textDecoration: 'underline'
}
};
},
methods: {
aumentarFuente() {
this.tamanoFuente += 2;
}
}
}).mount('#app');
</script>
</body>
</html>