vue,使用vant组件。实现点击收藏按钮，收藏人数实时显示增加，在点击一次取消收藏

按钮，收藏人数实时显示减少的功能。

1. 首先，在需要显示收藏人数的地方，使用vant的Badge组件，如下所示：

<van-badge :content="collectCount">
  <van-icon name="like-o" @click="collect"></van-icon>
</van-badge>

其中，`collectCount`为收藏人数，`collect`为点击收藏按钮的方法。

2. 在data中定义收藏人数和是否已收藏的变量：

data() {
  return {
    collectCount: 0, // 收藏人数
    collected: false // 是否已收藏
  }
}

3. 在点击收藏按钮的方法中，根据`collected`变量来判断是要收藏还是取消收藏，并且实时更新收藏人数的变量：

collect() {
  if (this.collected) {
    this.collectCount--;
  } else {
    this.collectCount++;
  }
  this.collected = !this.collected;
}

完整代码如下：

<template>
  <van-badge :content="collectCount">
    <van-icon name="like-o" @click="collect"></van-icon>
  </van-badge>
</template>

<script>
export default {
  data() {
    return {
      collectCount: 0, // 收藏人数
      collected: false // 是否已收藏
    }
  },
  methods: {
    collect() {
      if (this.collected) {
        this.collectCount--;
      } else {
        this.collectCount++;
      }
      this.collected = !this.collected;
    }
  }
}
</script>