如何用vuejs实现评论功能

这篇文章主要介绍“如何用vuejs实现评论功能”，在日常操作中，相信很多人在如何用vuejs实现评论功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何用vuejs实现评论功能”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

成都创新互联主打移动网站、成都网站设计、做网站、网站改版、网络推广、网站维护、域名注册、等互联网信息服务，为各行业提供服务。在技术实力的保障下，我们为客户承诺稳定，放心的服务，根据网站的内容与功能再决定采用什么样的设计。最后，要实现符合网站需求的内容、功能与设计，我们还会规划稳定安全的技术方案做保障。

用vuejs实现评论功能的方法：1、使用article-content组件，绑定一个obj；2、通过commemt-content组件实现评论功能即可。

如何用vuejs实现评论功能

本文操作环境：windows7系统、vue2.9.6版，DELL G3电脑。

怎么用vuejs实现评论功能?

Vue.js实现文章评论和回复评论功能:

本来想把这个页面用jade渲染出来、评论部分用vue，但是想了想觉得麻烦，最后还是整个用vue的组件搞定他吧。
先上在线demo：http://jsbin.com/ceqifo/1/edit?js,output

再上效果图

如何用vuejs实现评论功能

可直接评论，点击别人的评论能回复别人的评论。

html

数据全都由根组件绑定下去的。这里还监听了几个事件。

然后先说个简单点的，，文本框的那个组件。

Vue.component('commentTextarea',{
 template:'\
 \
 发表评论\
 你回复 {{name}}\
 \
 发表\
 取消\

', props: ['type','name'], data: function(){ return {commentText:""} }, methods: { addComment: function() { this.$emit("submit",this.commentText); this.commentText = ""; }, canelComment: function() { this.$emit("canel"); this.commentText = ""; } } });
type是如果点击了别人的评论，会显示 ”你回复xxx “ 的提示框，这个因为跨了组件通信而且两组件不是父子组件但是是兄弟组件，我把他们的通信挂在了父组件的一个属性上，实现通信。
文本框内的内容用一个v-model双向绑定，如果点击了确定，就触发一个 addComment事件并把文本内容传给父组件，父组件会监听事件。
commemt-content组件–评论内容
先来确定json格式
comment: [ { name: "有毒的黄同学", //评论人名字 time: "2016-08-17", content: "好,讲得非常好，good", reply: [ //回复评论的信息，是一个数组，如果没内容就是一个空数组 { responder: "傲娇的", //评论者 reviewers: "有毒的黄同学", //被评论者 time: "2016-09-05", content: "你说得对" } } ]
再来看commemt-content组件
Vue.component('commemt-content',{ template:'\ \
评论
\ 暂无评论，我来发表第一篇评论！
\ \ \ {{item.name}}{{item.time}}\ {{item.content}}
\ 0">\ \ {{reply.responder}} 回复 {{reply.reviewers}}{{reply.time}}\ {{reply.content}}
\

var comment = new Vue({ el: "#comment", data: { commenter: "session", //评论人，这里会从session拿 type: 0, //0为评论作者1为评论别人的评论 oldComment: null, //久评论者的名字 chosedIndex: -1, //被选中的评论的index article: { title: "当归泡水喝的九大功效", time: "2016-07-12", read:50, content: "" }, comment: [] //评论内容 }, methods: { //添加评论 addComment: function(data) { if(this.type == 0) { this.comment.push({ name: 'session', time: getTime(), content: data, reply: [] }); //服务器端 }else if(this.type == 1){ this.comment[this.chosedIndex].reply.push({ responder: 'session', reviewers:this.comment[this.chosedIndex].name, time: getTime(), content: data }); this.type = 0; } }, //监听到了点击了别人的评论 changCommmer: function(name,index) { this.oldComment = name; this.chosedIndex = index; this.type = 1; }, //监听到了取消评论 canelCommit: function() { this.type = 0; } } })

重庆分公司，新征程启航

如何用vuejs实现评论功能

发表评论

评论

其他资讯