簡易Vue評論框架的實現(xiàn)(父組件的實現(xiàn))_第1頁
簡易Vue評論框架的實現(xiàn)(父組件的實現(xiàn))_第2頁
簡易Vue評論框架的實現(xiàn)(父組件的實現(xiàn))_第3頁
全文預覽已結束

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第簡易Vue評論框架的實現(xiàn)(父組件的實現(xiàn))//引入組件commentInput、commentList、pagination

importUserDivfrom'./commentInput.vue'

importPageDivfrom'./pagination.vue'

importCommentDivfrom'./commentList.vue'

exportdefault{

//聲明組件名

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{

varstart=this.totalCount-this.currentPage*this.pagesize

if(start0){start=0}

//截取totalData中[start,start+this.pagesize]位元素進行顯示

this.List=this.totalData.slice(start,start+this.pagesize)

//評論列表倒序顯示，即最新評論，顯示在最上面

this.List.reverse()

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論