Run ❯
×
Change Orientation
Change Theme, Dark/Light
<!DOCTYPE html> <html> <head> <title>Moose count</title> <style> #app { border: dashed black 1px; box-sizing: border-box; padding: 10px; display: flex; flex-wrap: wrap; } #app > div { flex-basis: 200px; margin: 5px; } img { width: 100%; } button { margin: 5px; padding: 3px 6px; } </style> </head> <body> <h1>Example: Passing Arguments and Event Object with Methods</h1> <p>In this example we are able to count tigers, moose and kangaroos, with different increments, all buttons refering to the same method. This is possible by passing the numbers counted as an argument, and by passing the event.</p> <div id="app"> <div id="tigers"> <img src="img_tiger_square.jpeg" width="733" height="733"> <button v-on:click="addAnimal($event,1)">+1</button> <button v-on:click="addAnimal($event,5)">+5</button> <button v-on:click="addAnimal($event,-1)">-1</button> </div> <div id="moose"> <img src="img_moose_square.jpeg" width="549" height="549"> <button v-on:click="addAnimal($event,1)">+1</button> <button v-on:click="addAnimal($event,5)">+5</button> <button v-on:click="addAnimal($event,-1)">-1</button> </div> <div id="kangaroos"> <img src="img_kangaroo_square.jpeg" width="582" height="582"> <button v-on:click="addAnimal($event,1)">+1</button> <button v-on:click="addAnimal($event,5)">+5</button> <button v-on:click="addAnimal($event,-1)">-1</button> </div> <ul> <li>Tigers: {{ tigers }}</li> <li>Moose: {{ moose }}</li> <li>Kangaroos: {{ kangaroos }}</li> </ul> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script> const app = Vue.createApp({ data() { return { tigers: 0, moose: 0, kangaroos: 0 } }, methods: { addAnimal(e,number) { if(e.target.parentElement.id==="tigers"){ this.tigers+=number; } else if(e.target.parentElement.id==="moose"){ this.moose+=number; } else{ this.kangaroos+=number; } } } }) app.mount('#app') </script> </body> </html>