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

6.效果图

使用Vue中mock.js实现分页功能_第1张图片

你可能感兴趣的:(vue.js,web前端,mock.js,javascript,vue.js,前端)