ESLint - 规则名大全

分页示例

新建一个 *.html ，把所有代码粘贴进去，浏览器打开。

    分页参数：{{ param }}
    
    没有真实接口，所以数据就变一次
    
    
    
        
        {{ item.name }}
        
    
    

    
    
    下一页
    




const demo = new Vue({
    el: '#app',
    data:{

        // 数据
        list: [],

        // 分页参数()
        param: {
            page: 1,
            limit: 3
        }
    },

    mounted() {
        // 请求第一波展示数据
        this.getList()
    },

    methods: {

        // 请求数据(依靠分页参数)
        getList() {

            // 此时后端接口，都需要你传递 page 与 limit 参数
            // page：第几页
            // limit：一页多少条

            // 假设传递的参数是 this.param，也就是: {page:1, limit: 3}
            // 后端就知道，给你第1页的数据，一共要3条
            // 得到的结果就是如下:
            this.list = [
                { name: '张三', age: 14 },
                { name: '李四', age: 53 },
                { name: '王五', age: 23 }
            ]

            // 假设传递的参数是 {page:1, limit: 1}
            // 后端就知道，给你第1页的数据，一共要1条
            // 得到的结果就是如下:
            // this.list = [
            //     { name: '张三', age: 14 }
            // ]
        },

        

        // 分页按钮
        // 用户点击了下一页
        update() {
            
            // 第一步：把请求参数page++(因为是下一页了,limit不用变，还是固定3条数)
            this.param.page++

            // 第二步：拿着最新的param重新请求接口
            this.list = [//第二页的数据
                { name: '第二页了', age: 14 },
                { name: '哈地方', age: 53 },
                { name: 'ABS', age: 23 }
            ]
            // 这里没接口，所以数据没变化。

            // 如果是上一页，就是this.param.page--，再拿新参数去请求数据，赋值给变量即可。

        }

    }
})