06.-Vue js 2 tutorial espa帽ol ? [propiedades computadas]??

Introducci贸n

En este video vamos a trabajar con propiedades computadas, quiz谩 me digan que en el tutorial anterior tambi茅n trabajamos con propiedades computadas y pues es verdad pero en esta ocasi贸n vamos a trabajar con ejemplos mas avanzados y ademas esta 谩rea es muy importante que manejemos muy bien.

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" >
<h3>{{texto}}</h3>
<h3>{{alReves}}</h3>
<input type="text" v-model="texto">
<hr>
<div class="progress">
<div
class="progress-bar"
role="progressbar"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
:style="{width:contador+'%'}"
:class="tipoBarra"
>
{{contador}}
</div>
</div>
<button @click="contador++" class="btn btn-primary" >+</button>
<button @click="contador--" class="btn btn-danger" >-</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const con=new Vue({
el:"#elemento",
data:{
texto:'programador novato',
contador:0
},
computed: {
alReves(){
return this.texto.split('').reverse().join('');
},
tipoBarra(){
return {
'bg-success':this.contador <=10,
'bg-warning':this.contador >10 && this.contador <=20,
'bg-danger':this.contador >20
}
}
},
})
</script>
</html>

Codigo en github.com : https://github.com/programadornovato/vuejs
Codigo en codepen.io: https://codepen.io/programadornovato/pen/zQjZNy

Video

Eugenio Chaparro

Compartir
Publicado por
Eugenio Chaparro

Entradas recientes

馃煝Editar c贸digo de un m贸dulo en Dolibarr [04]

馃煝Editar c贸digo de un m贸dulo en Dolibarr [04]

En este tutorial vamos editar el c贸digo de nuestro m贸dulo personas para poder personalizar algunas…

2 meses hace
馃煝Crear un sub_m贸dulo en Dolibarr [03]

馃煝Crear un sub_m贸dulo en Dolibarr [03]

En este tutorial vamos a crear un sub m贸dulo llamado seguridad que ser谩 muy parecido…

2 meses hace
馃煝Modificar un m贸dulo en Dolibarr [02]

馃煝Modificar un m贸dulo en Dolibarr [02]

En este tutorial aprenderemos a editar el objeto personas del modulo persona que creamos en…

2 meses hace
馃煝Constructor de m贸dulos en Dolibarr

馃煝Constructor de m贸dulos en Dolibarr

Como mencionamos anteriormente Dolibarr es un proyecto realizado sobre la base de una pol铆tica clara:…

2 meses hace
馃煝Tickets en Dolibarr [19]

馃煝Tickets en Dolibarr [19]

Los ticket en dolibarr nos ayudan a comunicar inconveniente en nuestros productos y servicios dentro…

2 meses hace
馃煝Agenda en Dolibarr [18]

馃煝Agenda en Dolibarr [18]

Las agendas en dolibarr nos ayudan a ver las actividades realizadas en proceso y por…

2 meses hace