Vue - Eventos

Usando la directiva v-on en un botón permite disparar algún evento, en este caso se esta disparando una función.

Con los argumentos click y dblclick se define el comportamiento del botón

• click Con un solo click del botón se dispara un evento
• dblclick Es necesario un doble click sobre el botón para disparar el evento

1
2
3
4
5
6

<div id="app">
  <p>Numero: {{ numero }}</p>
  <button name="button" v-on:click="suma(numero)">Sumar</button>
  <button name="button" v-on:dblclick="resta(numero)">Restar</button>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var app = new Vue({
  el: '#app',
  data: {
    numero: 0
  },
  methods: {
    suma: function(numero) {
      this.numero++;
    },
    resta: function(numero) {
      this.numero--;
    }
  }
});

Resultado: