Closed nostalgiatan closed 1 week ago
仅仅只是作为一个示例的代码,里面的一些数据需要你们自己调整了哈,这是一个vue的小组件,它可以用于实现贴子书签的功能,里面有一个添加书签的按钮,或许可以调整一下,换一个更有绳网风格的按钮。
至于绳网的核心--背景动画,呃,我想想办法看能不能利用AI进行还原。
<template> <div> <div v-for="post in posts" :key="post.id" class="post"> <h2>{{ post.title }}</h2> <p>{{ post.content }}</p> <button @click="toggleBookmark(post.id)">Toggle Bookmark</button> </div> <div v-if="bookmarks.length > 0"> <h3>Bookmarks</h3> <ul> <li v-for="bookmark in bookmarks" :key="bookmark.id"> {{ bookmark.title }} </li> </ul> </div> </div> </template> <script> export default { data() { return { posts: [], // 假设这是从API或其他来源获取的帖子列表 bookmarks: [] // 存储书签的列表 }; }, methods: { toggleBookmark(postId) { const postIndex = this.posts.findIndex(post => post.id === postId); if (postIndex !== -1) { const post = this.posts[postIndex]; const bookmarkIndex = this.bookmarks.findIndex(bookmark => bookmark.id === postId); if (bookmarkIndex === -1) { this.bookmarks.push(post); } else { this.bookmarks.splice(bookmarkIndex, 1); } } } }, mounted() { // 从localStorage加载书签 this.bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || []; }, watch: { bookmarks: { handler(newValue) { // 将书签保存到localStorage localStorage.setItem('bookmarks', JSON.stringify(newValue)); }, deep: true } } }; </script>
已解决,请访问新域名 inot.top
仅仅只是作为一个示例的代码,里面的一些数据需要你们自己调整了哈,这是一个vue的小组件,它可以用于实现贴子书签的功能,里面有一个添加书签的按钮,或许可以调整一下,换一个更有绳网风格的按钮。
至于绳网的核心--背景动画,呃,我想想办法看能不能利用AI进行还原。