這篇文章主要介紹“如何用vuejs實現(xiàn)評論功能”，在日常操作中，相信很多人在如何用vuejs實現(xiàn)評論功能問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何用vuejs實現(xiàn)評論功能”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)主打移動網(wǎng)站、成都網(wǎng)站設(shè)計、做網(wǎng)站、網(wǎng)站改版、網(wǎng)絡(luò)推廣、網(wǎng)站維護、域名注冊、等互聯(lián)網(wǎng)信息服務(wù)，為各行業(yè)提供服務(wù)。在技術(shù)實力的保障下，我們?yōu)榭蛻舫兄Z穩(wěn)定，放心的服務(wù)，根據(jù)網(wǎng)站的內(nèi)容與功能再決定采用什么樣的設(shè)計。最后，要實現(xiàn)符合網(wǎng)站需求的內(nèi)容、功能與設(shè)計，我們還會規(guī)劃穩(wěn)定安全的技術(shù)方案做保障。

用vuejs實現(xiàn)評論功能的方法：1、使用article-content組件，綁定一個obj；2、通過commemt-content組件實現(xiàn)評論功能即可。

本文操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

怎么用vuejs實現(xiàn)評論功能?

Vue.js實現(xiàn)文章評論和回復(fù)評論功能:

本來想把這個頁面用jade渲染出來、評論部分用vue，但是想了想覺得麻煩，最后還是整個用vue的組件搞定他吧。
先上在線demo：http://jsbin.com/ceqifo/1/edit?js,output

再上效果圖

可直接評論，點擊別人的評論能回復(fù)別人的評論。

html

<div id="comment">
 <article-content v-bind:article="article"></article-content>
 <commemt-content v-bind:comment="comment" v-on:change="changCommmer"></commemt-content>
 <comment-textarea v-bind:type="type" v-bind:name="oldComment" v-on:submit="addComment" v-on:canel="canelCommit"></comment-textarea>
</div>

數(shù)據(jù)全都由根組件綁定下去的。這里還監(jiān)聽了幾個事件。

<article-content是文章內(nèi)容的組件，沒啥好講的，直接把數(shù)據(jù)綁定進去子組件就行了。這里我是直接綁定一個obj而不是把標(biāo)題、時間等等詳細的信息分別綁定進去。因為直接綁定一個對象，子組件可以用.的方式很好的調(diào)用，比分開寫好多了。

<article-content組件–文本

然后先說個簡單點的，<comment-textarea>，文本框的那個組件。

Vue.component('commentTextarea',{
 template:'\
 <div class="commentBox">\
 <h4>發(fā)表評論</h4>\
 <b v-if="type">你回復(fù)&nbsp;{{name}}</b>\
 <textarea name="" value="請?zhí)顚懺u論內(nèi)容" v-model="commentText"></textarea>\
 <button class="btn" @click="addComment">發(fā)表</button>\
 <button class="btn" @click="canelComment">取消</button>\
 </div>',
 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是如果點擊了別人的評論，會顯示 ”你回復(fù)xxx “ 的提示框，這個因為跨了組件通信而且兩組件不是父子組件但是是兄弟組件，我把他們的通信掛在了父組件的一個屬性上，實現(xiàn)通信。

文本框內(nèi)的內(nèi)容用一個v-model雙向綁定，如果點擊了確定，就觸發(fā)一個 addComment事件并把文本內(nèi)容傳給父組件，父組件會監(jiān)聽事件。

commemt-content組件–評論內(nèi)容

先來確定json格式

comment: [
 {
 name: "有毒的黃同學(xué)", //評論人名字
 time: "2016-08-17", 
 content: "好,講得非常好，good",
 reply: [ //回復(fù)評論的信息，是一個數(shù)組，如果沒內(nèi)容就是一個空數(shù)組
 {
 responder: "傲嬌的", //評論者
 reviewers: "有毒的黃同學(xué)", //被評論者
 time: "2016-09-05",
 content: "你說得對"
 }
 }
 ]

再來看commemt-content組件

Vue.component('commemt-content',{
 template:'\
 <div class="commentBox">\
 <h4>評論</h4>\
 <p v-if="comment.length==0">暫無評論，我來發(fā)表第一篇評論！</p>\
 <div v-else>\
 <div class="comment" v-for="(item,index) in comment" v-bind:index="index" >\
 <b>{{item.name}}<span>{{item.time}}</span></b>\
 <p @click="changeCommenter(item.name,index)">{{item.content}}</p>\
 <div v-if="item.reply.length > 0">\
  <div class="reply" v-for="reply in item.reply">\
  <b>{{reply.responder}}&nbsp;&nbsp;回復(fù)&nbsp;&nbsp;{{reply.reviewers}}<span>{{reply.time}}</span></b>\
  <p @click="changeCommenter(reply.responder,index)"">{{reply.content}}</p>\
  </div>\
 </div>\
 </div>\
 </div>\
 </div>',
 props: ['comment'],
 methods: {
 changeCommenter: function(name,index) {
 this.$emit("change",name,index);
 }
 }
});

如果沒有內(nèi)容，則顯示 “暫無評論，我來發(fā)表第一篇評論！”。如果有內(nèi)容就開始遍歷。因為點擊評論要知道第幾條，所以每條評論要綁一個v-bind:index="index"

到了二次評論那塊，還是遍歷reply數(shù)組，綁定該綁定的。因為就算點擊內(nèi)容，也是加到那條一級評論的最下面，所以兩個點擊事件我都是綁定了同一個事件。只是傳進去的名字不一樣而已，后面那個index都是一級評論的index。

changeCommenter事件觸發(fā)了change，父組件監(jiān)聽，執(zhí)行相應(yīng)行為。

父組件

var comment = new Vue({
 el: "#comment",
 data: {
 commenter: "session", //評論人，這里會從session拿
 type: 0, //0為評論作者1為評論別人的評論
 oldComment: null, //久評論者的名字
 chosedIndex: -1, //被選中的評論的index
 article: {
 title: "當(dāng)歸泡水喝的九大功效",
 time: "2016-07-12",
 read:50,
 content: ""
 },
 comment: [] //評論內(nèi)容
 },
 methods: {
 //添加評論
 addComment: function(data) {
 if(this.type == 0) {
 this.comment.push({
  name: 'session',
  time: getTime(),
  content: data,
  reply: []
 });
 //服務(wù)器端
 }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;
 }
 },
 //監(jiān)聽到了點擊了別人的評論
 changCommmer: function(name,index) {
 this.oldComment = name;
 this.chosedIndex = index;
 this.type = 1;
 },
 //監(jiān)聽到了取消評論
 canelCommit: function() {
 this.type = 0;
 }
 }
})

data那里。。。實在是取名困難癥啊。。。commenter是當(dāng)前登錄名，這里到時候會session里拿；type就是看到底是評論作者的還是評論別人的評論的；oldComment就是就評論者的名字（實際儲存的時候應(yīng)該是id）；chosedIndex是被點擊的評論的index。

canelCommit是監(jiān)聽到取消評論事件，這里是為了如果了點擊了別人的評論但是突然我就是想變評論作者用的。所以設(shè)type=0；

changCommmer是監(jiān)聽到點擊了別人評論想回復(fù)評論的。即type=1.

addComment就是監(jiān)聽添加評論事件的。根據(jù)type的值，push相應(yīng)的數(shù)組。這里還要記得跟數(shù)據(jù)庫那個對接。傳數(shù)據(jù)有兩種方法，這里是根據(jù)type的不同分兩個url傳還是一個，取決于表的設(shè)計。待我明天好好設(shè)計表后，加入http請求，完成這個評論功能。

到此，關(guān)于“如何用vuejs實現(xiàn)評論功能”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

分享文章：如何用vuejs實現(xiàn)評論功能
當(dāng)前鏈接：http://sd-ha.com/article12/jisogc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、App設(shè)計、小程序開發(fā)、軟件開發(fā)、定制開發(fā)、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)