当前位置：首页 > VUE

vue实现点击收藏

2026-01-17 15:10:29VUE

实现点击收藏功能

在Vue中实现点击收藏功能可以通过以下步骤完成，涉及数据绑定、事件处理和状态管理。

数据绑定与状态管理

在Vue组件中定义一个isFavorited的响应式数据，用于表示当前是否已收藏。可以使用ref或reactive：

<script setup>
import { ref } from 'vue';

const isFavorited = ref(false);
</script>

模板与事件绑定

在模板中添加一个按钮或图标，绑定点击事件和动态样式：

vue实现点击收藏

<template>
  <button 
    @click="toggleFavorite"
    :class="{ 'favorited': isFavorited }"
  >
    {{ isFavorited ? '已收藏' : '收藏' }}
  </button>
</template>

点击事件处理

实现toggleFavorite方法，切换收藏状态并可选地调用API：

const toggleFavorite = () => {
  isFavorited.value = !isFavorited.value;
  // 可选：调用API保存状态
  // saveFavoriteStatus(isFavorited.value);
};

样式处理

通过CSS为收藏状态添加视觉反馈：

vue实现点击收藏

button {
  background: #eee;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
}

button.favorited {
  background: gold;
  color: white;
}

持久化存储（可选）

如需持久化收藏状态，可以使用localStorage或调用后端API：

const saveFavoriteStatus = (status) => {
  localStorage.setItem('isFavorited', status);
  // 或调用API
  // axios.post('/api/favorite', { status });
};

初始化状态

在组件挂载时从存储中读取初始状态：

onMounted(() => {
  const savedStatus = localStorage.getItem('isFavorited');
  if (savedStatus) {
    isFavorited.value = savedStatus === 'true';
  }
});

完整示例

结合上述代码的完整单文件组件示例：

<script setup>
import { ref, onMounted } from 'vue';

const isFavorited = ref(false);

const toggleFavorite = () => {
  isFavorited.value = !isFavorited.value;
  localStorage.setItem('isFavorited', isFavorited.value);
};

onMounted(() => {
  const savedStatus = localStorage.getItem('isFavorited');
  if (savedStatus) {
    isFavorited.value = savedStatus === 'true';
  }
});
</script>

<template>
  <button 
    @click="toggleFavorite"
    :class="{ 'favorited': isFavorited }"
  >
    {{ isFavorited ? '已收藏' : '收藏' }}
  </button>
</template>

<style scoped>
button {
  background: #eee;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
}

button.favorited {
  background: gold;
  color: white;
}
</style>