美文网首页vue系列
vue 基于v-for限制简单的分页

vue 基于v-for限制简单的分页

作者: litielongxx | 来源:发表于2018-04-08 17:13 被阅读0次

前言

vue框架的v-for很适合用来渲染数据模板,但是并没有提供开始和结束的位置限制,一般需要进行条件限制的话可以用v-if进行控制渲染。比如网页常见的分页功能,默认需要展示5页,点击页数持续往后面移动,大于默认一般即2+1+2时居中高亮,总页数暂定为all。


常见分页

拆分结构

设定当前页为current,总页数为all,默认展示5页数(奇数适合对称),当前页用checked高亮,如下所示。小于5的时候需要页数渲染满5页,大于5页的时候隐去前2个和展示后2个,比较简单,但是能实现v-for循环的限制。


实现目标
点击默认一半
页数到尾

分页结构

<template>
  <li v-for="index in all"  @click="page(index)" :key="index" v-if="current-2<=index&&index<=(current+2<5?5:current+2)">
        <router-link :to="''"  :class="{'checked':index==current}">{{index}}</router-link>
  </li>
</template>
<script>

</script>

基础样式

<style lang="scss">
//基于ydui rem
.pagination {
        margin:.24rem 0;
        font-size:.18rem;
        ul {
              display:flex;
              justify-content: center;
              align-items: center;
            li {
                a{
                    display:block;
                    cursor: pointer;
                    padding:.15rem .25rem;
                    border-radius:5px;
                }
                .checked {
                    background:#64a281;
                    color:#fff;
                }
            }
        }
    }
</style>

js模块

methods: {
    pre() {
        this.$store.state.current--;
        this.$router.push({path:'videolist',query:{
                page:this.$store.state.current
            }   
        })
    },
    next() {
        this.$store.state.current++;
        this.$router.push({path:'videolist',query:{
                page:this.$store.state.current
            }   
        })
    },
    page(index) {
        this.$store.state.current=index;
        // 跳转页面
        this.$router.push({path:'videolist',query:{
                page:this.$store.state.current
            }   
        })
    }

相关文章

  • vue 基于v-for限制简单的分页

    前言 vue框架的v-for很适合用来渲染数据模板,但是并没有提供开始和结束的位置限制,一般需要进行条件限制的话可...

  • Vue 基础

    Vue 起步 Vue V-for循环 (一) Vue V-for 循环(二) Vue v-for表格

  • 2018-09-11

    简单的vue实例 记得导入vue.js 输出如下 v-for 指令可以绑定数组的数据value in arr : ...

  • 模拟百度翻页

    做wikix项目的时候,要自己写一个翻页插件,整个架构是基于vue的,所以用vue来写一个分页插件分析一下百度分页...

  • Vue.js入门整理

    Vue基础 常用指令循环v-for数组v-for="name in arr" , json格式v-for="nam...

  • 续报项目总结

    技术需求: 1.部分页面需要限制在微信内登录 解决方案:使用vue-router的路由守卫由于全局使用路由守卫限制...

  • 前后端开发分页操作

    基于spring boot+vue的分页实现 1.在pom.xml中添加依赖

  • 基于angularjs的分页实现

    基于angularjs的分页实现 抱着学习angularjs的想法,写了一个简单的分页指令,重在用angularj...

  • vue的简单运用和用V-for指令制作表单

    1.运用V-for指令表格制作 2用Vue输出hello Vue 3用V-for循环数组和对象

  • 2018-09-11 vue 第一节

    一、认识vue 二、 vue的指令---------------- v-for 循环操 三、表格

网友评论

    本文标题:vue 基于v-for限制简单的分页

    本文链接:https://www.haomeiwen.com/subject/nhkmhftx.html