06 2Bvuejs

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

06 2Bvuejs

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

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. :)