vue实现纯css直播点赞图标的动画效果组件

<template>
  <div class="like-button">
    <span class="like-icon">
      <img src="./heart.png" alt="点赞图标" />
    </span>
    <span class="like-count">{{ likeCount }}</span>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      likeCount: 0,
    };
  },
  methods: {
    incrementLike() {
      this.likeCount += 1;
      // 这里可以添加点赞后的逻辑，例如发送点赞请求到后端等
    }
  }
};
</script>
 
<style scoped>
.like-button {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
 
.like-icon img {
  width: 20px;
  height: 20px;
  transition: transform 0.2s;
}
 
.like-icon img:hover {
  transform: scale(1.1);
}
 
.like-count {
  margin-left: 5px;
  font-size: 16px;
}
</style>

这个简单的Vue组件展示了如何创建一个点赞按钮，并使用CSS为点赞图标和数量添加动画效果。用户将鼠标悬停在图标上时，图标会缩放，点赞数也会随着点赞次数的增加而更新。这个例子教会开发者如何在Vue中结合使用JavaScript和CSS来创建交互式组件。