vue 分页器

最新推荐文章于 2024-06-18 15:48:55 发布

星影缥缈yu

最新推荐文章于 2024-06-18 15:48:55 发布

阅读量247

点赞数 1

本文链接：https://blog.csdn.net/qiqilovehcy/article/details/102475972

版权

源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 分页器（菜鸟vue cdn）</title>
</head>
<style>
    .class1{
        background: #444;
        color: #eee;
    }
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
    *{margin:0;padding:0}
    li{
        list-style:none;
        float:left;
        border:1px solid blue;
        margin:0 8px;
        padding: 3px 5px;
        cursor: pointer;
    }
    .active{
        background-color:#f00;
        color:#fff;
        border:1px solid #f00;
    }
    .disabled{
        background-color:#BCBCBC;
        color:#555;
        border:1px solid #555;
    }
</style>
<div id="app">
    <ul @click="change">
    <!--需要重复生成的li加上v-for,如果当前页数是第一页,则上一页使用
    禁用样式,如果当前页数是最后一页，则下一页使用禁用样式-->
        <li :class="pno==1 ? 'disabled' : ''">上一页</li>
        <li v-for="i of pcount" :class="pno == i ? 'active' : ''"  :key="i">{{i}}</li>
        <li :class="pno == pcount ? 'disabled' : ''">下一页</li>
    </ul>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            pno:1,//当前第几页
            pcount:3//总页数
        },
        methods:{
        /*事件处理函数中，原理和DOM的事件委托的原理完全相同。
        只不过想修改元素时，不需要查找任何元素，
        仅修改data中的变量就可由vue自动更新元素的状态。*/
            change(e){
                if(e.target.nodeName=='LI'){
                    switch (e.target.innerHTML) {
                        case '上一页':
                            if (this.pno>1){this.pno--;}
                            break;
                        case '下一页':
                            if(this.pno<this.pcount){this.pno++}
                            break;
                        default :{
                            this.pno = parseInt(e.target.innerHTML)
                        }
                    }
                }
            }
        }
    })
</script>
</body>

效果如下：
在这里插入图片描述

星影缥缈yu

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue 分页器

源代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue 分页器（菜鸟vue cdn）</title></head><style> .class1{ background: #444...
复制链接

扫一扫