vue项目中实现简单的分页效果

vue项目中实现简单的分页效果
1.在data中声明数据：
data(){
return{
sel:0,//tab切换
news:[],//新闻动态的数据
health:[],//健康卫士的数据
current:0,
uldata:[{name:‘企业动态’,num:0},{name:‘健康贴士’,num:1}],
totalPage:1,//总页码数，默认为1
currentPage:1,//当前页，默认第一页，
pageSize:3,//每页显示的数量
currentPageData:[],//当前页显示的内容
productList:[]//数据总条数
}
},
template中模板

<li
v-for=‘item in currentPageData’
:key=‘item.id’
@click=‘jumpArticle(item.id)’
>

{{item.small}}

{{item.newsh3}}

浏览100次

{{item.newspan}}

{{item.newsh2}}

<span @click=“prevPage()”>
上一页

第{{currentPage}}页/共{{totalPage}}页
<span @click=“nextPage()”>
下一页

3.方法和赋值部分。
//设置当前页面数据，对数组操作的截取规则为[0-3][3-6][6-9]
setCurrentPageData(){
let begin = (this.currentPage - 1) * this.pageSize;
let end = this.currentPage * this.pageSize;
this.currentPageData = this.productList.slice(begin,end)
},
//上一页
prevPage() {
if (this.currentPage == 1) return;
this.currentPage–;
this.setCurrentPageData();
},
// 下一页
nextPage() {
if (this.currentPage == this.totalPage)return ;
this.currentPage++;
this.setCurrentPageData();
}

},
created(){
this.news=this.trendData
this.health=this.healths
this.productList=this.news
},
mounted(){
//计算总页码
this.totalPage=Math.ceil(this.productList.length/this.pageSize);
//计算得0时设置为1
this.totalPage=this.totalPage==0?1:this.totalPage;
this.setCurrentPageData();
},

}