如何實現Vue評論框架

小編給大家分享一下如何實現Vue評論框架，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

評論表單代碼：

<!-- 文檔結構區開始 -->
<template>
  <div id="comment" >
    <UserDiv @transferUser="getInput" ></UserDiv>
    <CommentDiv :List="List"></CommentDiv>
    <PageDiv @transferUser="getPage" :totalCount="totalCount" :currentPage="currentPage"></PageDiv>
  </div>
</template>
<!-- 文檔結構區結束 -->

<!-- js 控制區開始 -->
<script>
//引入組件 commentInput、commentList、pagination
import UserDiv from './commentInput.vue'
import PageDiv from './pagination.vue'
import CommentDiv from './commentList.vue'

export default {
  //聲明組件名
  name: 'comment',

  //包含實例可用組件的哈希表
  components: {
    UserDiv,
    PageDiv,
    CommentDiv
  },

  //聲明組件參數
  data() {
    return {
      totalCount: 0,
      currentPage: 1,
      pagesize: 3,
      totalData: [],
      List: [],
    }
  },

  methods: {
    //顯示評論列表信息的方法
    getInput(msg) {
      //將評論信息保存到評論數組里
      this.totalData.push({ text: msg })
      //計算評論信息總條數長度
      this.totalCount = this.totalData.length

      //判斷評論總數是否大于單頁顯示條數
      if (this.totalCount <= this.pagesize) {
       // 顯示所有評論
       this.List = this.totalData
      } else {
       // 截取totalData中 this.totalCount - this.pagesize 后面的元素進行顯示
       this.List = this.totalData.slice(this.totalCount - this.pagesize)
      }
      //點擊評論按鈕，默認跳轉顯示第一頁內容
      this.currentPage = 1
      //評論列表倒序顯示，即最新評論，顯示在最上面
      this.List.reverse()

    },

    // 計算評論列表每一頁的顯示內容
    getPage(curr, size) {
      this.currentPage = curr

      if (this.totalCount <= this.pagesize) {
        //顯示所有評論
        this.List = this.totalData
      } else {
        var start = this.totalCount - this.currentPage * this.pagesize
        if (start < 0) { start = 0 }
        // 截取totalData中 [start, start + this.pagesize] 位元素進行顯示
        this.List = this.totalData.slice(start, start + this.pagesize)
      }
      //評論列表倒序顯示，即最新評論，顯示在最上面
      this.List.reverse()
    }
  },
}
</script>
<!-- js 控制區結束 -->

以上是“如何實現Vue評論框架”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！