运行 ❯
获取您的
自己的
网站
×
更改方向
保存代码
更改主题，深色/浅色
前往 Spaces
<!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>
