vue,使用vant组件。实现点击收藏按钮，收藏人数实时显示

1. 在组件中引入vant组件库：

import { Button, Icon, Toast } from 'vant';

2. 在data中定义收藏人数和是否收藏的状态：

data() {
  return {
    isCollected: false,
    count: 0,
  };
},

3. 在template中使用vant的Button组件，并绑定点击事件：

<van-button type="primary" icon="star-o" @click="toggleCollect">{{ isCollected ? '取消收藏' : '收藏' }}</van-button>

4. 实现toggleCollect方法：

methods: {
  toggleCollect() {
    this.isCollected = !this.isCollected;
    this.count += this.isCollected ? 1 : -1;
    Toast(this.isCollected ? '收藏成功' : '取消收藏成功');
  },
},

5. 在mounted钩子函数中初始化收藏人数：

mounted() {
  // 初始化收藏人数
  this.count = Math.floor(Math.random() * 1000);
},

6. 最终效果如下图所示：