使用ant-design-vue的button组件实现计数器

• 新建项目
  本例使用的是vue3。

vue create demo

• Counter组件

// Counter.vue
<template>
    <div>{{count}}</div>
    <a-button type="primary" @click="add" class="btn">加</a-button>
    <a-button type="primary" @click="sub" class="btn">减</a-button>
</template>

<script>
// import {defineComponent,ref} from "vue";
// export default defineComponent({
//   name:"Counter",
//   setup(){
//     let count = ref(0);
//     const add = function(){
//       count.value++;
//     }
//     const sub = function(){
//       count.value--;
//     }
//     return {
//       count,
//       add,
//       sub
//     }
//   }
// })

import {ref} from "vue";
export default {
  name:"Counter",
  setup(){
    let count = ref(0);
    const add = () => {
      count.value++;
    }
    const sub = () => {
      count.value--;
    }
    return {
      count,
      add,
      sub
    }
  }
}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.btn{
  margin-right: 10px;
}
</style>

• 主组件

// App.vue
<template>
  <Counter></Counter>
</template>

<script>
import Counter from './components/Counter.vue';

export default {
  name: 'App',
  components: {
    Counter
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

• 入口文件

import { createApp } from 'vue'
import App from './App.vue';
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";

createApp(App).use(Antd).mount('#app')

• 测试验证