前言：
今天我们对“vue 评论回复”都比较讲究，同学们都想要知道一些“vue 评论回复”的相关内容。那么小编同时在网上收集了一些有关“vue 评论回复””的相关资讯，希望看官们能喜欢，各位老铁们一起来学习一下吧！前面给大家介绍了Vue的组件功能，本文我们通过一个评论列表的案例来巩固下组件的内容，具体效果如下:
在这里插入图片描述
Vue组件案例1.基本页面
我们先来整理下基础的页面如下:
<!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>Document</title> <script src="./lib/vue-2.4.0.js"></script></head><body> <div id="app"> </div> <script> var vm = new Vue({ el: "#app", data: { }, methods: { } }) </script></body></html>2.列表效果在基础页面的基础上我们来添加 底部的 评论列表，用bootstrap来实现。如下
<!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>Document</title> <script src="./lib/vue-2.4.0.js"></script> <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css"></head><body> <div id="app"> <ul class="list-group"> <!--循环取出列表数据--> <li class="list-group-item" v-for="(item ,i) in list" :key="item.id"> <span class="badge">{{item.name}}</span> {{item.content}} </li> </ul> </div> <script> var vm = new Vue({ el: "#app", data: { list: [ {id: Date.now(),name:"波波烤鸭1",content:"非常棒..."}, {id: Date.now(),name:"波波烤鸭2",content:"非常棒..."}, {id: Date.now(),name:"波波烤鸭3",content:"非常棒..."} ] }, methods: {} }) </script></body></html>在这里插入图片描述
3.添加评论组件
现在我们通过Vue的组件来添加 评论的头部，
在这里插入图片描述
在这里插入图片描述
组件使用
在这里插入图片描述
效果
在这里插入图片描述
4.实现效果
组件添加好后，我们通过点击 发表评论 来添加内容到 评论列表中。实现的逻辑是
通过点击 发表评论 触发点击事件 调用组件中methods中定义的方法在methods中定义的方法中 加载保存中 localStorage中的列表数据到list中将 录入的信息 添加到list中，然后将数据保存到 localStorage中调用父组件中的方法来刷新列表数据
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
效果
在这里插入图片描述
添加的效果是实现了，但是在 第一次刷新的时候显示的还是 固定的数据，这时我们可以 在Vue实例的生命周期的方法的 created 中再显示的调用一次 加载数据的方法
在这里插入图片描述
在这里插入图片描述
这样开始加载的就是 localStorage中的数据了。搞定~
完整代码
<!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>Document</title> <script src="./lib/vue-2.4.0.js"></script> <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css"></head><body> <div id="app"> <cmt-box @func="loadComments"></cmt-box> <ul class="list-group"> <li class="list-group-item" v-for="item in list" :key="item.id"> <span class="badge">评论人： {{ item.user }}</span> {{ item.content }} </li> </ul> </div> <template id="tmpl"> <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" value="发表评论" class="btn btn-primary" @click="postComment"> </div> </div> </template> <script> var commentBox = { data() { return { user: '', content: '' } }, template: '#tmpl', methods: { postComment() { // 发表评论的方法 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') } } } // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { list: [ { id: Date.now(), user: 'zs1', content: 'aaa' }, { id: Date.now(), user: 'zs2', content: 'bbbb' }, { id: Date.now(), user: 'zs3', content: 'cccc' } ] }, beforeCreate(){ // 注意：这里不能调用 loadComments 方法，因为在执行这个钩子函数的时候，data 和 methods 都还没有被初始化好 }, created(){ this.loadComments() }, methods: { loadComments() { // 从本地的 localStorage 中，加载评论列表 var list = JSON.parse(localStorage.getItem('cmts') || '[]') this.list = list } }, components: { 'cmt-box': commentBox } }); </script></body></html> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #vue 评论回复 #vue评论功能怎么做
