Vue - Múltiples Instancias Las instancias múltiples permiten tener mas de una instancia de vue en el mismo archivo JS permitiéndonos aplicar diferentes bloques de lógica en la pagina. De igual forma se puede interactuar entre las múltiples instancias, es por eso que es necesario colocar la instancia de vue en una variable <p class="comentario">Instancia Uno</p> <div id="vue-uno"> {{titulo}} </div> <p class="comentario">Instancia Dos</p> <div id="vue-dos"> {{ titulo }} - {{ otroTexto }} </div> var uno = new Vue({ el: '#vue-uno', data: { titulo: 'Titulo uno', texto: 'Texto proveniente de uno' } }); var dos = new Vue({ el: '#vue-dos', data: { titulo: 'Titulo dos', otroTexto: uno.

Vue - V-For Se usa la directiva v-for para recorrer todos los elementos dentro de la variable personas <div id="app1"> <ul> <li v-for="persona in personas"> {{ persona }} </li> </ul> </div> var app1 = new Vue({ el: '#app1', data: { personas: ['Uno', 'Dos', 'tres', 'cuatro'], } }); Resultado: Accediendo a los datos de 3 diferentes objetos <div id="app2"> <ul> <li v-for="alumno in alumnos"> {{ alumno.nombre }} - {{ alumno.

Vue - Condicionales Condicional if, else, else-if aplicadas en vue mediante las directivas: v-if, v-else y v-else-if <div id="app"> <button v-on:click="error = !error" type="button" name="button">Error</button> <button v-on:click="exito = !exito" type="button" name="button">Exito</button> <p v-if="error">Ocurrio un error</p> <p v-else-if="exito">Exito total</p> </div> si el mensaje es de error no se despliega el mensaje de exito, si el mensaje es de exito no se despliega el mensaje de error var app = new Vue({ el: '#app', data: { error: true, exito: true } }); Resultado: