vue实现循环点赞

Vue实现循环点赞功能

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

方法一：使用v-for指令渲染列表并绑定点击事件

<template>
  <div>
    <div v-for="(item, index) in items" :key="index" class="item">
      <span>{{ item.content }}</span>
      <button @click="toggleLike(index)">
        {{ item.liked ? '取消点赞' : '点赞' }} ({{ item.likes }})
      </button>
    </div>
  </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>

方法二：使用计算属性优化显示

<template>
  <div>
    <div v-for="(item, index) in itemsWithLikeText" :key="index" class="item">
      <span>{{ item.content }}</span>
      <button @click="toggleLike(index)">
        {{ item.likeText }} ({{ item.likes }})
      </button>
    </div>
  </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 }
      ]
    }
  },
  computed: {
    itemsWithLikeText() {
      return this.items.map(item => ({
        ...item,
        likeText: item.liked ? '取消点赞' : '点赞'
      }))
    }
  },
  methods: {
    toggleLike(index) {
      const item = this.items[index]
      item.liked = !item.liked
      item.likes += item.liked ? 1 : -1
    }
  }
}
</script>

方法三：封装点赞组件实现复用

<template>
  <div>
    <div v-for="(item, index) in items" :key="index" class="item">
      <span>{{ item.content }}</span>
      <like-button 
        :likes="item.likes" 
        :liked="item.liked"
        @like="toggleLike(index)"
      />
    </div>
  </div>
</template>

<script>
import LikeButton from './LikeButton.vue'

export default {
  components: { LikeButton },
  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>

LikeButton组件实现：

<template>
  <button @click="$emit('like')">
    {{ liked ? '取消点赞' : '点赞' }} ({{ likes }})
  </button>
</template>

<script>
export default {
  props: {
    likes: Number,
    liked: Boolean
  }
}
</script>

方法四：使用Vuex管理点赞状态

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

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    items: [
      { id: 1, content: '内容1', likes: 10, liked: false },
      { id: 2, content: '内容2', likes: 5, liked: true },
      { id: 3, content: '内容3', likes: 8, liked: false }
    ]
  },
  mutations: {
    toggleLike(state, id) {
      const item = state.items.find(item => item.id === id)
      if (item) {
        item.liked = !item.liked
        item.likes += item.liked ? 1 : -1
      }
    }
  }
})

组件中使用：

<template>
  <div>
    <div v-for="item in $store.state.items" :key="item.id" class="item">
      <span>{{ item.content }}</span>
      <button @click="$store.commit('toggleLike', item.id)">
        {{ item.liked ? '取消点赞' : '点赞' }} ({{ item.likes }})
      </button>
    </div>
  </div>
</template>

这些方法可以根据项目需求选择使用，从简单到复杂提供了不同层次的实现方案。