vue3制作简易计数器

好的，以下是一个简单的 Vue3 计数器组件的代码示例：

<template>
  <div>
    <h1>计数器</h1>
    <p>当前计数：{{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

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

    const decrement = () => {
      count.value -= 1;
    };

    return {
      count,
      increment,
      decrement,
    };
  },
};
</script>

在上面的代码中，我们使用了 Vue3 的 `ref` 函数来创建一个响应式变量 `count`，其初始值为 `0`。然后我们定义了两个方法 `increment` 和 `decrement`，分别用于增加和减少计数器的值。最后，在 `setup` 函数中，我们将变量和方法返回，以供模板中使用。模板中使用了 `{{ count }}` 来显示当前计数值，并且使用 `@click` 监听按钮的点击事件，来调用对应的方法。