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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable: Eugenio Chaparro.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a digitalocean.com que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad