使用vue3创建两个按钮实现加一和减一的功能

一、题目要求

    使用vue3的语法创建两个按钮，分别使用加一和减一的功能。

二、代码

在HomeView.vue页面中实现上述功能，代码我已经加上了详细的注释。

<script>
import { ref } from "vue";
export default {
  // setup()是页面的入口，每个。vue页面都有一个setup（）{}入口函数，加载页面首先从这里开始。一般在这里做一些初始化的操作。比如：页面数据、初始化请求 vue会在合适的时机来调用这个函数
  setup() {
    //1. 声明一个变量,setup里声明的变量如果setup块之外的要使用就要return出去
    const count = ref(100);
    const add = () => {
      count.value++;
    };
    const jian = () => {
      count.value--;
    };

    return {
      count,
      add,
      jian,
    };
  },
};
</script>
<!-- template写vue模板语法：html+js的组合 -->
<template>
  <main>
    <p>count:{{ count }}</p>
    <!-- 写一个按钮控制数字加1 -->
    <button @click="add">点击加一</button>
    <br color="pink" />
    <button @click="jian">点击减一</button>
  </main>
</template>
<style></style>

三、运行结果

（1）点击加一按钮

（2）点击减一按钮