04.-Vue js 2 tutorial español 👀 [keyup.enter,computed]👀👀



Introducción

En este tutorial vamos a seguir trabajando con VueJS y en este tutorial vamos a trabajar con mas eventos de Vue com presionar teclas, también vamos a realizar operaciones matemáticas, no se preocupen solo vamos a hacer sumas y restas (nada de integrales ni transformadas de gauss). Y para eso vamos a poner numeros en el codigo para sumarlos restarlos y multiplicarlos y hacer lo que querramos.

Codigo


<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <title>Vuejs</title>
  </head>
  <body>
    <div id="elemento">
      {{contenido}}
      <input type="text" v-model="nuevoLenguaje" @keyup.enter="agregarLenguaje" />
      <input type="text" v-model="nuevoLink"     @keyup.enter="agregarLenguaje"/>
      <button @click="agregarLenguaje" >Agregar lenguaje</button>
      <ul>
        <li v-for="lenguaje of lenguajes" >
          <a :href="lenguaje.link" target="_blank" >{{lenguaje.nombre}}</a> {{ lenguaje.puntos }}
          <button @click="lenguaje.puntos++">+</button>
          <button @click="lenguaje.puntos--">-</button>
        </li>
      </ul>
      Suma de todos los votos {{sumarTodo}}
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const con=new Vue({
      el:"#elemento",
      data:{
        contenido:"Hola mundo desde programador novato",
        lenguajes:[
        {nombre:"JavaScript",link:'https://www.javascript.com',puntos:0},
        {nombre:"PHP",link:'https://php.net',puntos:0},
        {nombre:"Python",link:'https://www.python.org',puntos:10}
        ],
        nuevoLenguaje:'',
        nuevoLink:'',
        total:0
      },
      methods: {
        agregarLenguaje(){
          this.lenguajes.push({nombre:this.nuevoLenguaje,link:this.nuevoLink})
          this.nuevoLenguaje='';
          this.nuevoLink='';
        }
      },
      computed: {
        sumarTodo(){
          this.total=0;
          for(lenguaje of this.lenguajes){
            this.total=this.total+lenguaje.puntos;
          }
          return this.total;
        }
      },
    })
  </script>
</html>

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

Video





Comentarios

Facebook Like

Entri Populer

hackear wifi con kali linux 📡

Instalar Netbeans 10 en Windows 10

Instalar netbeans 10 en ubuntu 18.04