代码改变世界
[登录 · 注册]
  • vue实现分页功能
  • 1.数据展示

    <template>
        <div class="sn-text ">
            <div class="sn-text1" v-for="(info, index) in dataShow"
                 :class="{ 'alt': index%2==1 }" :key="info.articleId">
                <img src="../../assets/img/003.jpg" align="right"/>
                <h5 v-on:click="AsyGetTestID(info.articleId)">
                    {{ info.title }}
                </h5>
                <p class="p-1">
                    {{ info.titleText }}
                </p>
    
    <!--        v-for="info in newinfo" :key="info.articleId"-->
                <div class="sn-text2">
                    <p>{{ info.time }}</p>
                    <p>
                        {{info.comment}}
                    </p>
                    <p>
                        {{info.read}}
                    </p>
                    <p>
                        {{info.give}}
                    </p>
                    <p>
                        Junior
                    </p>
                    <p class="t-1" @click="AsyGetTestID(info.articleId)">全文阅读</p>
                </div>
            </div>
    
            <div class="page">
                <ul>
                    <li class="inline-block text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
                        <a href="#"  v-on:click="prePage"> &lt; </a>
    
                    </li>
    
                    <li class="inline-block text-gray-700 text-center bg-gray-400 px-4 py-2 m-2" v-for="(item, index) in totalPage" :key="item.articleId">
                        <a href="#" v-on:click="toPage(index)" :class="{active: currentPage==index}">{{ index+1 }}</a>
                    </li>
                    <li class="inline-block text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
                        <a href="#" v-on:click="nextPage">&gt;</a>
                    </li>
                </ul>
            </div>
    
        </div>
    </template>
    

    2.data

     data() {
                return {
                    newinfo: [],
                    Labels: [],
    
                    //每页展示多少内容
                    perPage: 10000,
                    // 总页数
                    pageNum:1,
                    // 每页显示的个数
                    pageSize:4,
                    // 当前页
                    currentPage:0,
                    // 总数据
                    totalPage:[],
                    // 当前显示的数据
                    dataShow:[]
    
                }
            },
                
                created() {
                this.AsyGetTest()
            },
               methods: {
                nextPage: function(){
                    var vm = this;
                    if (vm.currentPage == vm.pageNum - 1) return;
    
                    vm.dataShow = vm.totalPage[++vm.currentPage]
                },
                prePage: function(){
                    var vm = this;
                    if (vm.currentPage == 0) return;
                    vm.dataShow = vm.totalPage[--vm.currentPage]
                },
                toPage: function(page){
                    var vm = this;
                    vm.currentPage = page
                    vm.dataShow = vm.totalPage[vm.currentPage];
                },
                //加载文章
                AsyGetTest() {
                    request({
                        url: '/api/SnArticle/GetTest'
                    }).then(res => {
                        // 只获取0到4之间的数据
                        this.newinfo = res.data.slice(0, this.perPage);
    
                        var vm = this;
                        // 总页数
                        vm.pageNum = Math.ceil(vm.newinfo.length / vm.pageSize) || 1 ;
                        // 分组
                        for (var i = 0; i<vm.pageNum; i++) {
                            vm.totalPage[i] = vm.newinfo.slice(vm.pageSize * i, vm.pageSize * (i + 1))
                        }
                        // 取值
                        vm.dataShow =  this.newinfo[vm.currentPage];
                        // vm.nextPage();
    
                    }).catch((e) => {
                        console.log(e + '获取数据失败');
                    });
    
                    //首次加载
                    request({
                        url: '/api/SnArticle/GetTest'
                    }).then(res => {
                        // 只获取0到4之间的数据
                        this.dataShow = res.data.slice(0, 4);
    
                    }).catch((e) => {
                        console.log(e + '获取数据失败');
                    });
                },
               
            }
    
  • 【推广】 阿里云小站-上云优惠聚集地(新老客户同享)更有每天限时秒杀!
    【推广】 云服务器低至0.95折 1核2G ECS云服务器8.1元/月
    【推广】 阿里云老用户升级四重礼遇享6.5折限时折扣!
  • 原文:https://www.cnblogs.com/ouyangkai/p/13558374.html
走看看 - 开发者的网上家园