04 2Bvuejs

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

04 2Bvuejs

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

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