本篇文章主要介紹了簡易 Vue 評論框架的實作(父元件的實作),內容挺不錯的,現在分享給大家,也給大家做個參考。
最近看到一個需求:
實作一個評論功能,要求對評論清單進行分頁顯示
對相應模組實作元件化
能顯示發佈者、發佈時間以及內容
乍一看不是很難,但在具體的實作上還是遇到了一些問題。此外,因為第一次使用 vue ,看文件看的也是一臉懵逼,話不多說,下面來分析一下,具體每個模組是怎麼實現的。
原始碼位址
評論表單程式碼:
<!-- 文档结构区开始 --> <template> <p id="comment" > <Userp @transferUser="getInput" ></Userp> <Commentp :List="List"></Commentp> <Pagep @transferUser="getPage" :totalCount="totalCount" :currentPage="currentPage"></Pagep> </p> </template> <!-- 文档结构区结束 -->
<!-- js 控制区开始 --> <script> //引入组件 commentInput、commentList、pagination import Userp from './commentInput.vue' import Pagep from './pagination.vue' import Commentp from './commentList.vue' export default { //声明组件名 name: 'comment', //包含实例可用组件的哈希表 components: { Userp, Pagep, Commentp }, //声明组件参数 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 控制区结束 -->
以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!
相關推薦:
關於VUE-地區選擇器(V-Distpicker )元件的使用介紹
#
以上是關於Vue評論框架的實作(父元件的實作)的詳細內容。更多資訊請關注PHP中文網其他相關文章!