vue实现分页vue分页查询怎么实现

最新推荐文章于 2024-07-26 12:28:02 发布

adam8831

最新推荐文章于 2024-07-26 12:28:02 发布

阅读量2.3k

点赞数 1

分类专栏： html vue 文章标签： java vue.js javascript json html5

本文链接：https://blog.csdn.net/adam8813/article/details/121642275

版权

html 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

效果图：

代码：

复制过去即可运行

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <!-- <script type="text/javascript" th:src="@{/js/jquery-3.2.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/axios-0.18.0.js}"></script>
    <script type="text/javascript"  th:src="@{/js/vuejs-2.5.16.js}"></script>
    <script type="text/javascript"  th:src="@{/js/com.js}"></script>-->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <table border="1" cellspacing="0" cellpadding="0" width="80%">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>电话</th>
            <th>网店</th>
        </tr>
        <tr v-for="(item, index) in dataShow" :class="{ 'alt': index%2==1 }">
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
            <td>{{ item.phone }}</td>
            <td>{{ item.url }}</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>
                <a href="#"  @click="prePageFirst">首页</a>
                <a href="#"  @click="prePage">上一页</a>

                <span v-for="(item, index) in pageNum">
                    <a href="#" @click="toPage(index)" :class="{active: currentPage==index}"> &nbsp; {{ index+1 }} </a>
                </span>
                <a href="#" @click="nextPage">下一页</a>
                <a href="#"  @click="prePageLast">末页</a>
            </td>
        </tr>
    </table>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            listArray:[
                {
                    'name':'好人1',
                    'age':'18',
                    'phone':'WX:adam8831',
                    'url':'javacto.taobao.com'
                },
                {
                    'name':'好人2',
                    'age':'19',
                    'phone':'adam8831',
                    'url':'javacto.taobao.com'
                },
                {
                    'name':'好人3',
                    'age':'20',
                    'phone':'WX:adam8831',
                    'url':'javacto.taobao.com'
                },
                {
                    'name':'好人4',
                    'age':'21',
                    'phone':'WX:adam8831',
                    'url':'javacto.taobao.com'
                },
                {
                    'name':'好人5',
                    'age':'22',
                    'phone':'55555',
                    'url':'javacto.taobao.com'
                }
            ],
            pageSize:3,
            currentPage:0
        },
        computed:{
            dataShow: function(){
                let start = this.currentPage*this.pageSize;
                let end = Math.min((this.currentPage+1)*this.pageSize, this.listArray.length)
                return this.listArray.slice(start, end)
            },
            pageNum: function(){
                return Math.ceil(this.listArray.length / this.pageSize) || 1 ;
            }
        },
        methods: {
            prePageFirst:function(){//首页
                var vm = this;
                vm.currentPage=0;
            },
            nextPage: function(){//下一页
                var vm = this;
                if (vm.currentPage == vm.pageNum - 1) return;
                vm.currentPage++;

            },
            prePage: function(){//上一页
                var vm = this;
                if (vm.currentPage == 0)
                return;
                vm.currentPage--;

            },prePageLast:function(){//末页
                var vm = this;
                vm.currentPage=vm.pageNum-1;
            },
            toPage: function(page){
                var vm = this;
                vm.currentPage = page
            }
        }
    })
</script>

</body>
</html>

adam8831

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
vue实现分页vue分页查询怎么实现

效果图：代码：复制过去即可运行<!DOCTYPE html><html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>Title</title> <!-- <script type="text/javascript" th:src="@{/js/jque.
复制链接

扫一扫

专栏目录