Vue - Clases CSS Dinámicas
<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 elementop
estado
esta es una variable definida en nuestra instancia de vue la cual tiene un estadofalse
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
.
.colorClase {
color: #2BBC8A;
}
var app = new Vue({
el: '#app',
data: {
estado: false
}
});
Resultado: