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







Comentarios

Facebook Like

Entri Populer

hackear wifi con kali linux 📡

Instalar Netbeans 10 en Windows 10

Instalar netbeans 10 en ubuntu 18.04