El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En Vue.js, la vinculación de clases y estilos es una característica poderosa que permite aplicar dinámicamente clases CSS y estilos en tus componentes. Esto es especialmente útil para cambiar la apariencia de los elementos en función del estado de tu aplicación.

Vinculación de Clases

1.1. Clases Dinámicas con `v-bind:class`

Vue.js permite vincular clases CSS a un elemento de manera dinámica utilizando la directiva v-bind:class o su atajo :class.

Ejemplo Básico

<div id="app">
  <div :class="classObject">Hola, Vue.js!</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    classObject: {
      active: true,
      'text-danger': false
    }
  }
});
</script>

En este ejemplo, el objeto classObject contiene dos propiedades: active y text-danger. La clase active se aplicará porque su valor es true, mientras que text-danger no se aplicará porque su valor es false.

1.2. Clases Condicionales con Arrays

También puedes usar un array para aplicar clases condicionalmente.

Ejemplo con Array

<div id="app">
  <div :class="[isActive ? 'active' : '', errorClass]">Hola, Vue.js!</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
    errorClass: 'text-danger'
  }
});
</script>

En este ejemplo, la clase active se aplicará si isActive es true, y text-danger se aplicará siempre porque errorClass contiene esa cadena.

Vinculación de Estilos

2.1. Estilos Dinámicos con `v-bind:style`

La directiva v-bind:style permite aplicar estilos en línea de manera dinámica.

Ejemplo Básico

<div id="app">
  <div :style="styleObject">Hola, Vue.js!</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    styleObject: {
      color: 'red',
      fontSize: '20px'
    }
  }
});
</script>

En este ejemplo, el objeto styleObject contiene dos propiedades: color y fontSize, que se aplicarán al elemento div.

2.2. Estilos Condicionales con Arrays

Al igual que con las clases, también puedes usar un array para aplicar estilos condicionalmente.

Ejemplo con Array

<div id="app">
  <div :style="[baseStyles, additionalStyles]">Hola, Vue.js!</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    baseStyles: {
      color: 'blue',
      fontSize: '15px'
    },
    additionalStyles: {
      fontWeight: 'bold'
    }
  }
});
</script>

En este ejemplo, los estilos de baseStyles y additionalStyles se combinarán y se aplicarán al elemento div.

Ejercicio Práctico

Ejercicio

Crea una aplicación Vue.js que cambie el color de un texto y su tamaño de fuente cuando se haga clic en un botón. El texto debe alternar entre dos conjuntos de estilos.

Solución

<div id="app">
  <div :style="isStyled ? styleOne : styleTwo">Texto Dinámico</div>
  <button @click="toggleStyle">Cambiar Estilo</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isStyled: true,
    styleOne: {
      color: 'green',
      fontSize: '20px'
    },
    styleTwo: {
      color: 'purple',
      fontSize: '30px'
    }
  },
  methods: {
    toggleStyle() {
      this.isStyled = !this.isStyled;
    }
  }
});
</script>

En este ejercicio, el texto alternará entre los estilos definidos en styleOne y styleTwo cada vez que se haga clic en el botón.

Resumen

En esta sección, hemos aprendido cómo vincular clases y estilos de manera dinámica en Vue.js utilizando las directivas v-bind:class y v-bind:style. Estas técnicas son esenciales para crear aplicaciones interactivas y visualmente atractivas. Asegúrate de practicar estos conceptos para dominarlos y aplicarlos en tus proyectos.

En el próximo módulo, exploraremos el renderizado condicional, que te permitirá mostrar u ocultar elementos en tu aplicación en función de ciertas condiciones.

Vinculación de Clases y Estilos