Evento de clic de Vue.js – Barcelona Geeks

Vue.js es un marco progresivo para crear interfaces de usuario. La biblioteca principal se centra solo en la capa de visualización y es fácil de seleccionar e integrar con otras bibliotecas. Vue también es perfectamente capaz de impulsar sofisticadas aplicaciones de una sola página en combinación con herramientas modernas y bibliotecas de soporte.

La directiva v-on se usa para permitir que los usuarios interactúen con la aplicación. Se puede adjuntar a los detectores de eventos que invocan métodos en las instancias de Vue. Esto permite invocar cualquier función necesaria cuando se produce el evento de clic.

Ejemplo 1:

Nombre de archivo- index.html:

HTML

<html>
<head>
    <script src=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
  </script>
</head>
<body>
    <div id='parent'>
        <h2>Counter - {{counter}}</h2>
        <button v-on:click='increment'>
          Increment
          </button>
        <button v-on:click='decrement'>
          Decrement
          </button>
    </div>
    <script src='app.js'>
  </script>
</body>
</html>

Nombre de archivo- app.js:

JavaScript

const parent = new Vue({
    el : '#parent',
    data : {
        counter : 0
    },
    methods: {
       increment : function(){
           this.counter += 1
       },
       decrement : function(){
           this.counter -= 1
       }
    }
})

Producción:

Ejemplo 2:

Nombre de archivo- index.html:

HTML

<html>
<head>
    <script src=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
      </script>
</head>
<body>
    <div id='parent'>
        <div id='box' 
             style='height:200px; 
                    width:200px; 
                    background-color:black;'>
          </div>
        <button v-on:click="changeColor">
          Change Color
          </button>
    </div>
    <script src='app.js'></script>
</body>
</html>

Nombre de archivo- app.js:

JavaScript

const parent = new Vue({
    el : '#parent',
    methods: {
        changeColor: function () {
            const box =
              document.querySelector('#box')
            const red =
              Math.floor(Math.random() * 256 + 1)
            const green =
              Math.floor(Math.random() * 256 + 1)
            const blue =
              Math.floor(Math.random() * 256 + 1)
  
            box.style.background =
              "rgb("+red+", "+green+", "+blue+ ")"
        }
      }
})

Producción:

Publicación traducida automáticamente

Artículo escrito por hunter__js y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

JavaScript

HTML

JavaScript

Deja una respuesta Cancelar la respuesta