05 2Bvuejs

05.-Vue js 2 tutorial español ? [clases dinámicas]??

05 2Bvuejs

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

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

En Programador Novato vivimos de los anuncios, hemos detectado que está utilizando extensiones para bloquear anuncios. Ayudanos deshabilitando tu bloqueador de anuncios. :)