当前位置：首页 > VUE

vue 实现点赞功能

2026-02-24 23:31:45VUE

实现点赞功能的基本思路

在Vue中实现点赞功能，通常需要处理用户交互、状态管理和数据持久化。以下是几种常见的实现方式：

使用v-on绑定点击事件

通过v-on或@简写绑定点击事件，配合v-bind或:动态绑定样式或图标：

<template>
  <button @click="toggleLike">
    <span :class="{ 'liked': isLiked }">❤️</span>
    {{ likeCount }}
  </button>
</template>

<script>
export default {
  data() {
    return {
      isLiked: false,
      likeCount: 0
    }
  },
  methods: {
    toggleLike() {
      this.isLiked = !this.isLiked;
      this.likeCount += this.isLiked ? 1 : -1;
    }
  }
}
</script>

<style>
.liked {
  color: red;
}
</style>

结合Vuex进行状态管理

对于跨组件共享点赞状态，可以使用Vuex：

vue 实现点赞功能

// store.js
export default new Vuex.Store({
  state: {
    likes: {}
  },
  mutations: {
    TOGGLE_LIKE(state, postId) {
      if (!state.likes[postId]) {
        Vue.set(state.likes, postId, { liked: false, count: 0 });
      }
      state.likes[postId].liked = !state.likes[postId].liked;
      state.likes[postId].count += state.likes[postId].liked ? 1 : -1;
    }
  }
});

组件中使用：

<template>
  <button @click="toggleLike(postId)">
    <span :class="{ 'liked': isLiked }">❤️</span>
    {{ likeCount }}
  </button>
</template>

<script>
import { mapState } from 'vuex';

export default {
  props: ['postId'],
  computed: {
    ...mapState({
      isLiked: state => state.likes[this.postId]?.liked || false,
      likeCount: state => state.likes[this.postId]?.count || 0
    })
  },
  methods: {
    toggleLike() {
      this.$store.commit('TOGGLE_LIKE', this.postId);
    }
  }
}
</script>

与后端API交互

实际项目中通常需要保存点赞数据到后端：

vue 实现点赞功能

methods: {
  async toggleLike() {
    try {
      const action = this.isLiked ? 'unlike' : 'like';
      await axios.post(`/api/posts/${this.postId}/${action}`);
      this.isLiked = !this.isLiked;
      this.likeCount += this.isLiked ? 1 : -1;
    } catch (error) {
      console.error('Error toggling like:', error);
    }
  }
}

添加动画效果

使用Vue的过渡系统或CSS动画增强用户体验：

<transition name="bounce">
  <span v-if="isLiked" class="like-icon">❤️</span>
</transition>

<style>
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
@keyframes bounce-in {
  0% { transform: scale(0); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
}
</style>

防止重复提交

添加loading状态防止快速重复点击：

data() {
  return {
    isLoading: false
  }
},
methods: {
  async toggleLike() {
    if (this.isLoading) return;
    this.isLoading = true;
    try {
      // API调用
    } finally {
      this.isLoading = false;
    }
  }
}

以上方法可以根据项目需求组合使用，实现完整且用户友好的点赞功能。