move the logic out of the HTML code
This commit is contained in:
parent
a8736a6c8f
commit
0ba28e968e
|
@ -4,6 +4,14 @@ const app = Vue.createApp({
|
|||
counter: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
increaseCounter() {
|
||||
this.counter++;
|
||||
},
|
||||
decreaseCounter() {
|
||||
this.counter--;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
app.mount("#events");
|
||||
|
|
|
@ -17,8 +17,8 @@
|
|||
</header>
|
||||
<section id="events">
|
||||
<h2>Events in Action</h2>
|
||||
<button v-on:click="counter++">Add</button>
|
||||
<button v-on:click="counter--">Reduce</button>
|
||||
<button v-on:click="increaseCounter">Add</button>
|
||||
<button v-on:click="decreaseCounter">Reduce</button>
|
||||
<p>Result: {{ counter }}</p>
|
||||
</section>
|
||||
</body>
|
||||
|
|
Reference in New Issue