vue中原生js实现分页

黄同学不会前端

于 2023-12-24 22:38:29 发布

阅读量588

点赞数 13

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_56164661/article/details/135188246

版权

页面效果：

实现功能：

1.点击 < 返回上一页（不是首页状态下）

2. 点击 > 前往下一页（不是尾页状态下）

3.根据点击页数切换对应页

分页的重点是怎么处理数据，数据本来是一个数组，我们可以通过slice将数据处理成二维数组，通过切换数组的索引值实现分页

//数据
courselist: [
                        { name: 'springcloud', price: 20 },
                        { name: 'vue', price: 30 },
                        { name: 'js', price: 40 },
                        { name: 'php', price: 50 },
                        { name: 'springcloud', price: 20 },
                        { name: 'vue', price: 30 },
                        { name: 'js', price: 40 },
                        { name: 'php', price: 50 },
                        { name: 'springcloud', price: 20 },
                        { name: 'vue', price: 30 },
                        { name: 'js', price: 40 },
                        { name: 'php', price: 50 },
                    ],
                    result:[],

//分页处理
for(let i = 0;i<this.courselist.length;i+=3){
                    this.result.push(this.courselist.slice(i,i+3))
                }

这样我们就可以获得一个每项长度为三的二维数组了

全过程：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fenye</title>
    <script src="./vue.global.min.js"></script>
    <style>
        #fenye dl{
            display: flex;
            list-style: none;
        }
        #fenye li{
            margin-left: 10px;
        }
    </style>
</head>
<body>
<!-- 原生js实现分页 删除 -->

<div id="page">
    <ul>
        <li v-for="(it) in result[num]">
            课程名称：{{it.name}}---价格：{{it.price}}
            <!-- <button @click="edit(idx)">编辑</button> -->
            <button @click="del(idx)">删除</button>
        </li>
    </ul>
    <div id="fenye">
        <dl>
            <li @click="lastpage"><</li>
            <li v-for="(it,idx) in fenyelist" @click="change(idx)">{{it}}</li>
            <li @click="nextpage">></li>
        </dl>
    </div>
</div>

<script>
    Vue.createApp({
        data() {
            return {
                // 12条数据 分页 每次只渲染3条数据
                courselist: [
                        { name: 'springcloud', price: 20 },
                        { name: 'vue', price: 30 },
                        { name: 'js', price: 40 },
                        { name: 'php', price: 50 },
                        { name: 'springcloud', price: 20 },
                        { name: 'vue', price: 30 },
                        { name: 'js', price: 40 },
                        { name: 'php', price: 50 },
                        { name: 'springcloud', price: 20 },
                        { name: 'vue', price: 30 },
                        { name: 'js', price: 40 },
                        { name: 'php', price: 50 },
                    ],
                    fenyelist:[1,2,3,4],
                    result:[],
                    num:0
            }
        },
        methods: {
            // 根据下标删除
            del(x){
                var list = this.courselist.splice(x,1) 
            },
            // 上一页
            lastpage(){
                if(this.num ==1){
                    this.num==1
                }else{
                    this.num--
                }
            },
            // 下一页
            nextpage(){
                var length =this.result.length-1
                if(this.num==length){
                    this.num==length
                }else{
                    this.num++
                }
            },
            // 根据点击页数切换对应页
            change(idx){
                this.num=idx+1
            }
            
        },
        mounted () {
            for(let i = 0;i<this.courselist.length;i+=3){
                    this.result.push(this.courselist.slice(i,i+3))
                }
        },
    }).mount('#page')
</script>

</body>
</html>

黄同学不会前端

关注

13
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
vue中原生js实现分页

分页的重点是怎么处理数据，数据本来是一个数组，我们可以通过slice将数据处理成二维数组，通过切换数组的索引值实现分页。这样我们就可以获得一个每项长度为三的二维数组了。2. 点击 > 前往下一页（不是尾页状态下）1.点击 < 返回上一页（不是首页状态下）3.根据点击页数切换对应页。
复制链接

扫一扫