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

Enviar mensajes de Whatsapp automaticamente [Twilio tutorial en EspaƱol 2022]

Enviar mensajes de Whatsapp automaticamente [Twilio tutorial en EspaƱol 2022]

Twilio es una pĆ”gina web que nos permite enviar mensajes de texto vĆ­a Whatsapp. El…

3 semanas hace
šŸ“± Crear un cronometro de cuenta regresiva 2da parte en Android Studio [30]

šŸ“± Crear un cronometro de cuenta regresiva 2da parte en Android Studio [30]

En este tutorial vamos a terminar de hacer nuestro cronĆ³metro y le agregaremos horas minutos…

4 semanas hace
šŸ“± Crear un cronometro de cuenta regresiva en Android Studio [29]

šŸ“± Crear un cronometro de cuenta regresiva en Android Studio [29]

En este tutorial vamos a crear un cronometro que cuent de un tiempo inicial a…

4 semanas hace
šŸ“± Colocar un progressbar WebView en Android Studio [28]

šŸ“± Colocar un progressbar WebView en Android Studio [28]

En este tutorial vamos colocar un progressbar (Barra de progreso) a nuestro WebView para ver…

4 semanas hace
šŸ“± Detectar error al cargar WebView en Android Studio [27]

šŸ“± Detectar error al cargar WebView en Android Studio [27]

En este tutorial vamos a detectar si nuestra pĆ”gina web cargo exitosamente o tuvo algĆŗn…

4 semanas hace
šŸ“± Cargar una pagina web con WebView en Android Studio [26]

šŸ“± Cargar una pagina web con WebView en Android Studio [26]

En este tutorial vamos a cargar una pĆ”gina web dentro de nuestro activity con la…

4 semanas hace