Vue - Clases CSS Dinámicas

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 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 = !

Vue - Propiedades Computadas

Vue - Propiedades Computadas Las propiedades computadas permite realizar operaciones complejas sobre las variables definidas en data de vue, de igual forma son mas eficientes que las funciones ya que estas solo se ejecutan cuando se les llama a diferencia de las funciones que se ejecutan constantemente. <div id="app"> <p>Mensaje original: "{{ mensaje }}"</p> <p>Mensaje Inverso: "{{ mensajeInverso }}"</p> </div> var app = new Vue({ el: '#app', data: { mensaje: 'Hola' }, computed: { mensajeInverso: function () { return this.

Vue - Two-Way Data Binding

Vue - Two-Way Data Binding La directiva v-model permite enlazar los input con las variables definidas en vue y realizar el renderizado de las mismas. <div id="app"> <p>Nombre: {{nombre}}</p> <input type="text" name="" value="" v-model="nombre"> <p>Edad: {{edad}}</p> <input type="text" name="" value="" v-model="edad"> </div> var app = new Vue({ el: '#app', data: { nombre: '', edad: '' } }); Resultado: