当前位置：首页 > VUE

vue怎么实现点赞

2026-01-21 09:33:24VUE

Vue实现点赞功能的方法

在Vue中实现点赞功能可以通过多种方式完成，以下是几种常见的实现方法：

方法一：使用v-on指令绑定点击事件

<template>
  <button @click="handleLike">点赞 {{ likeCount }}</button>
</template>

<script>
export default {
  data() {
    return {
      likeCount: 0
    }
  },
  methods: {
    handleLike() {
      this.likeCount++
    }
  }
}
</script>

方法二：使用计算属性

vue怎么实现点赞

当需要根据点赞状态显示不同样式时，可以结合计算属性：

<template>
  <button 
    @click="toggleLike"
    :class="{ 'liked': isLiked }"
  >
    {{ isLiked ? '已赞' : '点赞' }} {{ likeCount }}
  </button>
</template>

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

<style>
.liked {
  background-color: #ff4757;
  color: white;
}
</style>

方法三：结合后端API

vue怎么实现点赞

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

<template>
  <button 
    @click="handleLike"
    :disabled="loading"
  >
    {{ isLiked ? '取消点赞' : '点赞' }} {{ likeCount }}
  </button>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    postId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      likeCount: 0,
      isLiked: false,
      loading: false
    }
  },
  created() {
    this.fetchLikeStatus()
  },
  methods: {
    async fetchLikeStatus() {
      const response = await axios.get(`/api/posts/${this.postId}/likes`)
      this.likeCount = response.data.likeCount
      this.isLiked = response.data.isLiked
    },
    async handleLike() {
      this.loading = true
      try {
        if (this.isLiked) {
          await axios.delete(`/api/posts/${this.postId}/likes`)
          this.likeCount--
        } else {
          await axios.post(`/api/posts/${this.postId}/likes`)
          this.likeCount++
        }
        this.isLiked = !this.isLiked
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

方法四：使用Vuex管理状态

在大型应用中，可以使用Vuex集中管理点赞状态：

// store/modules/likes.js
export default {
  state: {
    likes: {}
  },
  mutations: {
    SET_LIKE(state, { postId, count, status }) {
      Vue.set(state.likes, postId, { count, status })
    }
  },
  actions: {
    async toggleLike({ commit }, postId) {
      const response = await axios.post(`/api/posts/${postId}/likes/toggle`)
      commit('SET_LIKE', {
        postId,
        count: response.data.count,
        status: response.data.status
      })
    }
  }
}

<template>
  <button @click="toggleLike(postId)">
    {{ isLiked ? '取消点赞' : '点赞' }} {{ likeCount }}
  </button>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  props: ['postId'],
  computed: {
    ...mapState({
      likeInfo: state => state.likes.likes[this.postId] || { count: 0, status: false }
    }),
    likeCount() {
      return this.likeInfo.count
    },
    isLiked() {
      return this.likeInfo.status
    }
  },
  methods: {
    ...mapActions(['toggleLike'])
  }
}
</script>