Quasar Counter with Input Step - Quasar-framework Typing CST Test

Quasar Counter with Input Step — Quasar-framework Code

Increment or decrement counter by a custom input step.

<template>
<q-page class="flex flex-center">
  <div class="text-center">
    <h2>{{ count }}</h2>
    <q-input v-model.number='step' type='number' label='Step' class='q-mb-md'/>
    <q-btn color="primary" @click="increment">+</q-btn>
    <q-btn color="negative" @click="decrement">-</q-btn>
    <q-btn color="secondary" @click="reset">Reset</q-btn>
  </div>
</q-page>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
const step = ref(1);
const increment = ()=>count.value+=step.value;
const decrement = ()=>count.value-=step.value;
const reset = ()=>count.value=0;
</script>

Quasar-framework Language Guide

Quasar Framework is a Vue.js-based framework that allows developers to build high-performance, responsive web apps, mobile apps (via Cordova/Capacitor), and desktop apps (via Electron) using a single codebase.

More Quasar-framework Typing Exercises

Practice Other Languages