Vue 组件+localStorage实现评论列表功能

本文分享了一个使用Vue和localStorage实现的简单评论系统案例,包括发表和删除评论的功能,适合初学者学习。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这是我第一次写博客,写得不好请原谅

本章简介

因为最近在学习Vue,感觉还不错,但仅仅局限初级的,为此非常抱歉。一些简单的示例还是比较不错的,分享给你们,希望你们有收获!
本章使用localStorage进行存储,功能方面实现了两个功能:1.发表评论;2.删除评论

准备工作

首先是js文件,Vue.js(链接的官网),本章会使用,没有的各位可以通过点击进行下载!

其次是本章使用的样式css文件是bootstrap,没有的各位也可进行点击下载!

浏览器工具:我使用的谷歌(chrome)浏览器;编辑软件:Visual Studio Code

效果图

评论界面展示
在这里插入图片描述
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件案例-评论列表</title>
    <script src="./lib/vue.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
    <div id="app" class="container">
        <h1>评论</h1>
        <cmt-box @func="loadComments"></cmt-box>

        <ul class="list-group">
            <li class="list-group-item" v-for="(item, i) in list" :key="item.id" @click="del(item.id)">
                <span class="badge">评论人:{{ item.user }}</span>
                {{ item.content }}
            </li>
        </ul>
    </div>

    <template id="tmp1">
        <div>
            <div class="form-group">
                <label>评论人:</label>
                <input type="text" class="form-control" v-model="user">
            </div>
            <div class="form-group">
                <label>评论内容:</label>
                <textarea class="form-control" v-model="content"></textarea>
            </div>
            <div class="form-group">
                <input type="button" class="btn btn-primary" value="发表评论" @click="postComment">
            </div>
        </div>
    </template>

    <script>
        var commentBox = {
            template: '#tmp1',
            data(){
                return{
                    user: '',
                    content: ''
                }
            },
            methods: {
                postComment(){ // 发表评论的方法
                    // 分析:发表评论的业务逻辑
                    // 1. 评论数据保存到 localStorage
                    // 2. 先组织出一个最新的评论数据对象
                    // 3. 先把第二步中得到的评论对象,保存到 localStorage
                    //  3.1 localStorage 只支持存放字符串数据,要先调用 JSON.stringify
                    //  3.2 在保存最新的评论数据之前,要先从localStorage获取到之前的评论数据(string),转换为 一个 数组对象,然后把最新的评论push(或unshift)到这个数组,push是将其加在后面而unshift是将其加载到前面
                    //  3.3 如果获取到的 localStorage 中的评论字符串,为空不存在,则可以返回一个'[]' 让 JSON.parse 去转换
                    //  3.4 把最新的评论列表数组,再次调用JSON.stringify转为数组字符串,然后调用 localStorage.setItem()
                    var comment = { id: Date.now(), user: this.user, content: this.content }
                    
                    // 这是从 localStorage 中获取所有的评论
                    var list = JSON.parse(localStorage.getItem('cmts') || '[]')
                    list.unshift(comment)
                    // 重新保存最新的评论数据
                    localStorage.setItem('cmts', JSON.stringify(list))
                    this.user = this.content = ''
                    // 获取子组件的方法
                    this.$emit('func')
                }
            }
        }

        var vm = new Vue({
            el: '#app',
            data: {
                list: [
                	// 模板对象,在实际中用不到
                    {id: Date.now(), user: '李白', content: '天生我才必有用'},
                    {id: Date.now(), user: '江小北', content: '劝君更尽一杯酒'},
                    {id: Date.now(), user: '李小明', content: '明天的明天'},
                ]
            },
            methods: {
                loadComments(){ // 从本地的 localStorage 中,加载评论列表
                    var list = JSON.parse(localStorage.getItem('cmts') || '[]')
                    // 将查询出来的数据加载到 vm 实例的data数据的list集合中去
                    this.list = list
                },
                del(id){
                	// 删除集合中的某一个数据的两种方式
                	// 第一种方式
                    this.list.some((item,i)=>{
                        if(item.id == id){
                        	// 通过splice的方式将this.list集合中以索引 i 将其删除
                            this.list.splice(i, 1)
                            localStorage.setItem('cmts', JSON.stringify(this.list))
                            return true
                        }
                    })
					// 第二种方式
                    // var index = this.list.findIndex(item => {
                    //     if (item.id == id) {
                    //         return true;
                    //     }
                    // })
                    // this.list.splice(index, 1)
                    // localStorage.setItem('cmts', JSON.stringify(this.list))
                }
            },
            components: {
                'cmt-box': commentBox
            },
            // 在vm实例中,生命周期为created中初始化评论列表
            created() {
                this.loadComments()
            }
        })
    </script>
</body>
</html>

补充(localStorage)

在本章中,这个 localStorage 给各位贴出,忘记写了,抱歉
在这里插入图片描述

结束语

本次的分享就结束了,有错的地方或不对的,请给位大佬不吝啬的指出,谢谢各位了,再见!!!

### Vue实现评论列表功能Vue实现评论列表功能可以通过多种方式完成,以下是基于提供的引用内容以及常见实践的一个完整解决方案。 #### 1. 页面结构设计 页面由两部分组成:标题区域和评论显示区域。标题区域展示“收到的评论和回复”,而评论显示区域通过 `.item` 样式块呈现每条评论的内容、用户头像、用户名、时间和操作按钮等信息[^2]。 ```html <template> <div class="container"> <!-- 标题 --> <h2>收到的评论和回复</h2> <!-- 评论列表 --> <ul class="comment-list"> <li v-for="(comment, index) in comments" :key="index" class="item"> <img :src="comment.avatar" alt="Avatar" class="avatar" /> <span class="username">{{ comment.username }}</span> <p class="content">{{ comment.content }}</p> <small class="time">{{ formatDate(comment.time) }}</small> <button @click="deleteComment(index)">删除</button> </li> </ul> <!-- 发表评论 --> <form @submit.prevent="addComment"> <textarea v-model="newCommentContent" placeholder="请输入评论"></textarea> <button type="submit">发表评论</button> </form> </div> </template> ``` --- #### 2. 数据管理与逻辑处理 为了持久化存储评论数据,可以利用 `localStorage` 来保存用户的输入并加载已有的评论记录[^4]。以下是一个完整的脚本部分: ```javascript <script> export default { data() { return { newCommentContent: "", // 新增评论内容 comments: [] // 存储所有评论的数据 }; }, created() { this.loadComments(); // 初始化时加载本地存储中的评论 }, methods: { loadComments() { const storedComments = localStorage.getItem("comments"); if (storedComments) { this.comments = JSON.parse(storedComments); } }, saveComments() { localStorage.setItem("comments", JSON.stringify(this.comments)); }, addComment() { if (!this.newCommentContent.trim()) return; const now = new Date(); this.comments.push({ avatar: "https://via.placeholder.com/50", // 默认头像占位符 username: "匿名用户", content: this.newCommentContent, time: now.getTime() }); this.saveComments(); // 更新到本地存储 this.newCommentContent = ""; // 清空输入框 }, deleteComment(index) { this.comments.splice(index, 1); // 删除指定索引的评论 this.saveComments(); // 同步更新至本地存储 }, formatDate(timestamp) { const date = new Date(parseInt(timestamp)); return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart( 2, "0" )}-${date.getDate().toString().padStart(2, "0")}`; } } }; </script> ``` --- #### 3. 样式美化 为了让界面更加友好,可以添加基础样式来增强用户体验。 ```css <style scoped> .container { max-width: 800px; margin: auto; } .item { display: flex; align-items: center; border-bottom: 1px solid #ccc; padding: 10px; } .avatar { width: 50px; height: 50px; border-radius: 50%; margin-right: 10px; } .username { font-weight: bold; } .content { margin-left: 10px; } .time { color: gray; font-size: small; } button { margin-left: auto; } </style> ``` --- #### 4. 扩展功能——递归评论列表 如果需要支持多级嵌套的评论(即子评论),则可以引入递归组件的概念[^3]。下面是一个简单的例子: ```html <!-- CommentItem.vue --> <template> <div class="comment-item"> <div class="header"> <img :src="comment.avatar" alt="Avatar" class="avatar" /> <span>{{ comment.username }}:</span> </div> <div class="body"> {{ comment.content }} </div> <div class="footer"> <small>{{ formatDate(comment.time) }}</small> <button @click="toggleReplyBox">回复</button> </div> <transition name="fade"> <form v-if="showReplyBox" @submit.prevent="replyToComment"> <input v-model="replyContent" placeholder="写一条回复..." /> <button type="submit">发送</button> </form> </transition> <ul v-if="comment.replies && comment.replies.length > 0"> <CommentItem v-for="(reply, idx) in comment.replies" :key="idx" :comment="reply" /> </ul> </div> </template> <script> export default { props: ["comment"], data() { return { showReplyBox: false, replyContent: "" }; }, methods: { toggleReplyBox() { this.showReplyBox = !this.showReplyBox; }, replyToComment() { if (!this.replyContent.trim()) return; if (!this.comment.replies) { this.$set(this.comment, "replies", []); } this.comment.replies.push({ avatar: "https://via.placeholder.com/50", username: "匿名用户", content: this.replyContent, time: new Date().getTime(), replies: [] }); this.replyContent = ""; }, formatDate(timestamp) { const date = new Date(parseInt(timestamp)); return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart( 2, "0" )}-${date.getDate().toString().padStart(2, "0")}`; } } }; </script> ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值