vue 写收藏夹功能的代码
时间: 2024-05-26 14:10:00 浏览: 7
可以参考以下代码:
<template>
<div>
<h2>收藏夹</h2>
<ul>
<li v-for="item in favorites" :key="item.id">
<router-link :to="{ name: item.routeName }">{{ item.title }}</router-link>
<button @click="removeFavorite(item.id)">删除</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
favorites: [] // 收藏夹列表
}
},
created() {
// 初始化收藏夹列表
const storedFavorites = localStorage.getItem('favorites')
if (storedFavorites) {
this.favorites = JSON.parse(storedFavorites)
}
},
methods: {
// 添加收藏
addFavorite(routeName, title) {
const favorite = {
id: Date.now(),
routeName,
title
}
this.favorites.push(favorite)
localStorage.setItem('favorites', JSON.stringify(this.favorites))
},
// 删除收藏
removeFavorite(id) {
this.favorites = this.favorites.filter(item => item.id !== id)
localStorage.setItem('favorites', JSON.stringify(this.favorites))
}
}
}
</script>