Today I am sharing a simple snippet which may help you with getting started in your Vue.js Journey. Enjoy!

What does the counter do?

Simple Counter in Vue.js with Increase, Decrease and Reset buttons:

Increase button will increase the counter until it crosses the limit. When it crosses the limit, it will stop. Currently set to 20 in the demo.

in the demo. Decrease button will decrease the counter until it crosses the limit. When it crosses the limit, it will stop. Currently set to 0 in the demo.

in the demo. Reset button will reset the counter to 0

2. Computed property to show the output as per the current value:

If the counter is less than 10, It will show less than 10

If the counter is 10 or more, it will show 10 or more.

Here is the Snippet!

new Vue({

el: '#app-root',

data: { counter: 0, result: '' }, // Initial Value

methods: {

increaseCounter(increaseLimit) { // Increase

if (this.counter < increaseLimit)

this.counter++;

},

decreaseCounter(decreaseLimit) { // Decrease

if (this.counter > decreaseLimit)

this.counter--;

},

resetCounter() { // Reset

this.counter = 0;

}

},

computed: {

output() { // Output for computed property!

return this.counter >= 10 ? '10 or more' : 'Less than 10';

}

}

});



And, Here is the demo!