使用Vue中mock.js实现分页功能

最新推荐文章于 2024-05-06 21:36:41 发布

风轻云淡旳流年

最新推荐文章于 2024-05-06 21:36:41 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/m0_55853116/article/details/115255529

版权

web前端同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

vue.js

6 篇文章 0 订阅

订阅专栏

mock.js

1 篇文章 0 订阅

订阅专栏

本文展示了如何在Vue.js项目中结合Mock.js来实现分页功能。首先引入Vue.js和Mock.js库，然后定义CSS样式和HTML布局，包括输入框、分页按钮和数据展示区域。接着在Vue实例中，定义数据、方法和计算属性，处理分页逻辑，如切换页码、获取数据等。最后，通过Mock.js生成模拟数据，并在页面加载时调用getData()方法初始化分页显示。

摘要由CSDN通过智能技术生成

使用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>