使用Vue中mock.js实现分页功能
使用Vue中mock.js实现分页功能
1.引入Vue.js包
<script src=https://cdn.jsdelivr.net/npm/vue/dist/vue.js></script>
2.引入Mock.js包
<script src="http://mockjs.com/dist/mock.js"></script>
3.Css样式
<style>
.red{
background: #000;
color:white
}
</style>
4.Html 布局
<body>
<div id="app">
<input type="text" v-model="isA">
<p>{
{
text}}</p>
<p>总页数:{
{
pageNum}}</p>
<p>当前页:{
{
currentPage+1}}</p>
<button @click="nextPage">下一页</button>
<button @click="curPage(i)" :class="{red:currentPage==i}" v-for="btn,i in pageNum">
{
{
btn}}
</button>
<button @click="prePage">上一页</button>
<ul v-for="item in dataShow">
<li>{
{
item.id}}</li>
<li>{
{
item.name}}</li>
<li>{
{
item.ago}}</li>
<li>{
{
item.sex}}</li>
<li>{
{
item.job}}</li>
<li>{
{
item.img}}</li>
</ul>
</div>
</body>
5.Vue.js 代码
<script>
const vm = new Vue({
el:"#app",
data:{
isA:A,
isB:B,
text:,
data:[],
totalPage:[],//每页显示数据
pageSize:10,//显示数量
pageNum:1, //共几页
dataShow:"",//当前显示第一页数据
currentPage:0 //默认显示第一页
},
computed:{
},
methods:{
nextPage(){
if(this.currentPage === this.pageNum-1) return
this.dataShow = this.totalPage[++this.currentPage];
this.getData()
},
prePage(){
if(this.currentPage === 0) return
this.dataShow = this.totalPage[--this.currentPage];
this.getData()
},
curPage(i){
this.currentPage = i
this.getData()
},
getData(){
//共
this.pageNum = Math.ceil(this.data.length/this.pageSize) || 1;
this.data.map((item,i)=>{
this.totalPage[i] =this.data.slice(this.pageSize * i ,this.pageSize*(i+1))
})
this.dataShow = this.totalPage[this.currentPage];
console.log(this.dataShow )
}
},
mounted(){
//mock 数据
var list =Mock.mock({
"userInfo|100":[{
//生成|num个如下格式名字的数据
"id|+1":1, //数字从当前数开始后续依次加一
"name":"@name", //名字为随机中文名字
"ago|18-28":25, //年龄为18-28之间的随机数字
"sex|1":["男","女"], //性别是数组中的一个，随机的
"job|1":["web","UI","python","php"] , //工作是数组中的一个
"img":"@image"
}]
})
this.data=list.userInfo
console.log(this.data)
this.getData();
},
})
</script>
上一篇：
IDEA上Java项目控制台中文乱码