<!-- 文檔結(jié)構(gòu)區(qū)開(kāi)始 --><template>  <div id="comment" >    <UserDiv @transferUser="getInput" ></UserDiv>    <CommentDiv :List="List"></CommentDiv>    <PageDiv @transferUser="getPage" :totalCount="totalCount" :currentPage="currentPage"></PageDiv>  </div></template><!-- 文檔結(jié)構(gòu)區(qū)結(jié)束 -->

<!-- js 控制區(qū)開(kāi)始 --><script>//引入組件 commentInput、commentList、paginationimport UserDiv from './commentInput.vue'import PageDiv from './pagination.vue'import CommentDiv from './commentList.vue'export default {  //聲明組件名  name: 'comment',  //包含實(shí)例可用組件的哈希表  components: {    UserDiv,    PageDiv,    CommentDiv  },  //聲明組件參數(shù)  data() {    return {      totalCount: 0,      currentPage: 1,      pagesize: 3,      totalData: [],      List: [],    }  },  methods: {    //顯示評(píng)論列表信息的方法    getInput(msg) {      //將評(píng)論信息保存到評(píng)論數(shù)組里      this.totalData.push({ text: msg })      //計(jì)算評(píng)論信息總條數(shù)長(zhǎng)度      this.totalCount = this.totalData.length      //判斷評(píng)論總數(shù)是否大于單頁(yè)顯示條數(shù)      if (this.totalCount <= this.pagesize) {       // 顯示所有評(píng)論       this.List = this.totalData      } else {       // 截取totalData中 this.totalCount - this.pagesize 后面的元素進(jìn)行顯示       this.List = this.totalData.slice(this.totalCount - this.pagesize)      }      //點(diǎn)擊評(píng)論按鈕，默認(rèn)跳轉(zhuǎn)顯示第一頁(yè)內(nèi)容      this.currentPage = 1      //評(píng)論列表倒序顯示，即最新評(píng)論，顯示在最上面      this.List.reverse()    },    // 計(jì)算評(píng)論列表每一頁(yè)的顯示內(nèi)容    getPage(curr, size) {      this.currentPage = curr      if (this.totalCount <= this.pagesize) {        //顯示所有評(píng)論        this.List = this.totalData      } else {        var start = this.totalCount - this.currentPage * this.pagesize        if (start < 0) { start = 0 }        // 截取totalData中 [start, start + this.pagesize] 位元素進(jìn)行顯示        this.List = this.totalData.slice(start, start + this.pagesize)      }      //評(píng)論列表倒序顯示，即最新評(píng)論，顯示在最上面      this.List.reverse()    }  },}</script><!-- js 控制區(qū)結(jié)束 -->