【Vue.js+TypeScript】Vueコンポーネント

足し算、引き算をするVueコンポーネントのサンプル。

MuButton.vue

<script setup lang="ts">
import {ref} from 'vue'

const count = ref(0)

const increment = () => {
  count.value++
}

const decrement = () => {
  if (count.value == 0) {
    return
  }
  count.value--
}
</script>

<template>
  <h1>{{ count }}</h1>
  <button type="button" @click="increment">IncrementButton</button>
  <button type="button" @click="decrement">DecrementButton</button>
</template>

<style scoped>

</style>