ant-design-vue/components/badge/demo/change.md

1.0 KiB

#### ๅŠจๆ€ ๅฑ•็คบๅŠจๆ€ๅ˜ๅŒ–็š„ๆ•ˆๆžœใ€‚ #### Dynamic The count will be animated as it changes.
<template>
  <a-badge :count="count">
    <a href="#" class="head-example"></a>
  </a-badge>
  <a-button-group>
    <a-button @click="decline">
      <a-icon type="minus"></a-icon>
    </a-button>
    <a-button @click="increase">
      <a-icon type="plus"></a-icon>
    </a-button>
  </a-button-group>
  <br />
  <a-badge :dot="isShow">
    <a href="#" class="head-example()"></a>
  </a-badge>
  <a-button @click="changeShow()">toggle</a-button>
</template>
<script>
export default {
  data(){
    return {
      count: 3,
      isShow: true,
    }
  },
  methods: {
    decline () {
      let count = this.count - 1
      if (count < 0) {
        count = 0
      }
      this.count = count
    },
    increase () {
      const count = this.count+1
      this.count = count // ไธบไป€ไนˆไธ็”จthis.count++?็œไบ‹่ฟ˜็ฎ€ๅ•๏ผŸ
    },
    changeShow () {
      this.isShow = !this.isShow
    }
  }
}
</script>