Vue - Clases CSS Dinámicas

1
2
3
4

<div id="app">
  <p v-bind:class="{colorClase:estado}">Texto que cambia de color</p>
  <button class="btn" v-on:click="estado = !estado" type="button" name="button">Color</button>
</div>

En la linea 2 del HTML se observa la directiva v-bind la cual contiene dos parametros {colorClase:estado}

• colorClase Esta es la clase que se a creado para ser aplicada en el elemento p
• estado esta es una variable definida en nuestra instancia de vue la cual tiene un estado false con la cual definimos si se aplica o no la clase al texto

En la linea 3 del html se puede observar a la directiva v-on:click con la lógica estado = !estado con esto se indica que cada vez que se presiona el botón, cambia de un estado al estado contrario. Ejemplo: si el estado de la variable es false, entonces al presionar el botón cambia al estado contrario true.

1
2
3

.colorClase {
  color: #2BBC8A;
}

1
2
3
4
5
6

var app = new Vue({
  el: '#app',
  data: {
    estado: false
  }
});

Resultado: