Vue3 카운터 만들기 (Nuxt)

카운터

---

• ref
• @click

<template>
  <div class="divClass">
    <button @click="counterUp" class="btn">up</button>
    <h2 style="padding: 1rem">{{ a }}</h2>
    <button @click="counterDown" class="btn">down</button>
  </div>
</template>

<script setup>
import { ref } from "vue";

let a = ref(0);

let counterUp = () => {
  a.value++;
};
let counterDown = () => {
  a.value--;
};
</script>

<style scoped>
.divClass {
  width: 100%;
  height: 100%;

  align-items: center;
  text-align: center;
  display: flex;
  justify-content: center;
}
h2 {
  font-size: 5rem;
}
.btn {
  border: 1px black;
  font-size: 2rem;
  padding: 1rem;
}
.btn:hover {
  border: 1px rgb(59, 57, 57);

  font-size: 2rem;
}
</style>