当前位置：首页 > VUE

vue实现列表点赞

2026-02-20 16:55:25VUE

实现思路

在Vue中实现列表点赞功能，主要涉及数据绑定、事件处理和状态更新。通常需要为列表中的每一项维护一个点赞状态，并通过点击事件触发状态变更。

基础实现

准备一个包含点赞状态的列表数据，使用v-for渲染列表，并为每个项绑定点击事件。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.content }}
        <button @click="toggleLike(index)">
          {{ item.liked ? '取消点赞' : '点赞' }} ({{ item.likes }})
        </button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { content: '内容1', likes: 10, liked: false },
        { content: '内容2', likes: 5, liked: true },
        { content: '内容3', likes: 8, liked: false }
      ]
    }
  },
  methods: {
    toggleLike(index) {
      const item = this.items[index]
      item.liked = !item.liked
      item.likes += item.liked ? 1 : -1
    }
  }
}
</script>

优化实现

添加动画效果提升用户体验，使用Vue的过渡组件实现点赞动画。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.content }}
        <button @click="toggleLike(index)">
          <transition name="fade" mode="out-in">
            <span :key="item.liked">
              {{ item.liked ? '取消点赞' : '点赞' }}
            </span>
          </transition>
          ({{ item.likes }})
        </button>
      </li>
    </ul>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

服务端交互

实际项目中通常需要与后端API交互，保存点赞状态到数据库。

methods: {
  async toggleLike(index) {
    const item = this.items[index]
    const newLikedState = !item.liked

    try {
      const response = await axios.post('/api/like', {
        itemId: item.id,
        liked: newLikedState
      })

      item.liked = newLikedState
      item.likes = response.data.likes
    } catch (error) {
      console.error('点赞操作失败', error)
    }
  }
}

防抖处理

为防止用户快速多次点击，可以添加防抖功能。

import { debounce } from 'lodash'

methods: {
  toggleLike: debounce(function(index) {
    const item = this.items[index]
    item.liked = !item.liked
    item.likes += item.liked ? 1 : -1
  }, 300)
}

vue实现列表点赞