前景:前后端分离,需要与后端配合,调取后端数据接口。
图片:
css代码
.active{
background-color: #3778AD;
}
html代码
<nav aria-label="Page navigation" style="text-align:center;">
//上一页
<ul>
<li @click="prePage()" :class="pageNo<=1?'disabled':''">
<a aria-label="Previous" ><span aria-hidden="true" ><</span></a>
</li>
//页数列表
<li :class="pageNo==index?'active':''" v-for="index in pageTotal" :key="index" @click="curPage(index)">
<a>{
{index}}</a>
</li>
//下一页
<li @click="nextPage()" :class="pageNo>=pageTotal?'disabled':''">
<a aria-label="Next" ><span aria-hidden="true">></span></a>
</li>
</ul>
<nav>
js
//页面加载请求数据
window.onload=function(){
new Vue({
el:'#app',
data:{
lists:[],
pageTotal:1.//总页数
pageNo:1,//默认页
},
methods:{
getList(i){
this. pageNo=i|| this. pageNo;
axios({
method:'get',//请求方式
//使用模板字符串 jquery获取属性${}
url:`http://192.168.0.0.1:8000/home/page/${pageNo}/${pageTotal}`
}).then(res=>{
let {data, pageTotal}=res.data;
this.lists=data;//数组接收
}).catch(error=>{
console.log(error)
})
},
//上一页
prePage(){
if(pageNo>1){
this.getList(--this.pageNo);
}
},
//下一页
nextPage(){
if(pageNo<pageTotal){
this.getList(++this.pageNo);
}
},
},
mounted(){
this.getList()
},
})
}
记录一下,少走弯路!!!