05.-Vue js 2 tutorial español ? [clases dinámicas]??
Introducción
En este tutorial vamos a ver el input text de los puntos que quedo pendiente en el tutorial anterior y vamos a crear clases dinámicas, en otras palabras vamos a modificar los nombres de las clases de nuestros elementos dependiendo de los eventos (con botones) que generemos.
Codigo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Vuejs</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div id="elemento" class="container mt-5" >
<div :class="['p-2', 'text-white', colorFondo]">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum non doloribus iste veniam voluptatibus, sequi id quia maxime minima, saepe eveniet autem aut? Earum non quisquam ex repellendus hic nesciunt.
</div>
<input type="text" v-model="colorFondo">
<div class="p-2 text-white" :class="{'bg-danger':cambioColor,'bg-primary':!cambioColor}">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum non doloribus iste veniam voluptatibus, sequi id quia maxime minima, saepe eveniet autem aut? Earum non quisquam ex repellendus hic nesciunt.
</div>
<button class="btn btn-primary" @click="cambioColor=!cambioColor" >Cambia color</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const con=new Vue({
el:"#elemento",
data:{
colorFondo:'bg-primary',
cambioColor:false
},
methods: {
}
})
</script>
</html>
Codigo github.com: https://github.com/programadornovato/vuejs
Codigo en codepen.io: https://codepen.io/programadornovato/pen/WBJxVp
Video
Ave que vuela, a la cazuela.