使用vue自定义分页器

分页器是前端比较常用的一个组件，可以全局注册，并在其他组件中引用

<li class=“prev disabled” @click=“getPage(pageNo-1)” :disabled=‘pageNo==1’>
«上一页

<li :class=“{ active: pageNo == 1 }” v-show=“startAndEnd.start > 1” @click=“getPage(1)”>
1

<li :class=“{ active: pageNo == 2 }” v-show=“startAndEnd.start > 2” @click=“getPage(2)”>
2
    <li class="dotted" v-show="startAndEnd.start > 3"><span>...</span></li><liv-for="(p, index) in startAndEnd.end":key="index"v-show="p >= startAndEnd.start":class="{ active: pageNo == p }"@click="getPage(p)"><a>{{ p }}</a></li><li class="dotted" v-show="startAndEnd.end < totalPage-1"><span>...</span></li><li :class="{ active: pageNo == startAndEnd.end }" @click="getPage(totalPage)" v-show="startAndEnd.end<totalPage"><a>{{ totalPage }}</a></li><li class="next" :disabled='pageNo==totalPage' @click="getPage(pageNo+1)"><a>下一页»</a></li></ul><div><span>共{{ totalPage }}页</span></div>
</div>   </div> </template>

使用vue自定义分页器相关推荐

swiper自定义分页器
html部分 <div class="swiper-container"><div class="swiper-wrapper">&l ...
vue 定义全局弹框_VUE路由拦截：Vue自定义全局弹窗组件
前言在任何一个平台中,如果需要增加用户黏度,除了用户需要的基本内容外,用户登录注册提交信息也是非常重要的一环,可以了解用户基本信息,用户喜欢等. 抛出前后端混合开发外,vue可以轻松的实现路由拦截. ...
page 怎么把list 分页_自定义分页器的实现
前言 django也有自带额分页器,但是功能较少,使用起来较为繁琐.所以我们可以使用自定义非分页器. 自定义分页器的推导思路 # queryset对象是支持索引切片操作的(不支持负数索引) book_ ...
Web框架之Django_07 进阶操作（MTV与MVC、多对多表三种创建方式、前后端传输数据编码格式contentType、ajax、自定义分页器）
阅读目录一.MVC与MTV 二.多对多表的创建三.ajax,前后端传输编码格式contentType 四.批量插入数据与自定义分页器摘要 MTV与MVC 多对多表三种创建方式 ajax ,前后端 ...
php动态写入vue,Vue自定义动态组件使用详解
这次给大家带来Vue自定义动态组件使用详解,Vue自定义动态组件的注意事项有哪些,下面就是实战案例,一起来看一下. 现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这 ...
vue自定义指令封装节流_Vue自定义指令封装节流函数的方法示例
节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在<JavaScript高级程序设计>一书中有这样的一个例子 ...
[vue] vue自定义事件中父组件怎么接收子组件的多个参数？
[vue] vue自定义事件中父组件怎么接收子组件的多个参数? 子组件传递多个参数,父组件用展开运算符获取个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起 ...
vue自定义组件，插槽，自定义事件
vue组件套娃 1. vue自定义组件 2. 组件和插槽套娃 3. vue组件通过自定义事件更改vue实例中的数据 1. vue自定义组件语法 Vue.component('自定义组件名', {pr ...
vue 嵌套表格组件_使用form-create动态生成vue自定义组件和嵌套表单组件
使用form-create动态生成vue自定义组件和嵌套表单组件 maker.create 通过建立一个虚拟 DOM的方式生成自定义组件生成 Maker let rule = [ formCreat ...

使用vue自定义分页器

使用vue自定义分页器相关推荐

最新文章

热门文章