Vue.js - 使用Vue实现简简单单的分页功能
2023-06-13 09:11:38 时间
前言
最近又开始考古之前的光年后台模板了,然后发现这个分页还挺好看的,但是实现起来很麻烦,所以就结合Vue2实现了一个动态的换页效果。
Html
<div id="page" class="container text-center">
<nav>
<ul class="pagination pagination-circle">
<li :class="(nowPage==1)?'disabled':''">
<a @click="prevPage" href="javascript:void(0)">
<span><i class="mdi mdi-chevron-left"></i></span>
</a>
</li>
<li :class="(nowPage==page)?'active':''" v-for="page in pageList">
<a @click="changePage(page)" href="javascript:void(0)">{{page}}</a>
</li>
<li :class="(nowPage==pageList.length)?'disabled':''">
<a @click="nextPage" href="javascript:void(0)">
<span><i class="mdi mdi-chevron-right"></i></span>
</a>
</li>
</ul>
</nav>
</div>
JavaScript
var page = new Vue({
el: '#page',
data: {
lists: [],
pageList: [1, 2, 3, 4, 5, 6, 7, 8],
nowPage: 1
},
methods: {
changePage: function(page) {
this.nowPage = page;
// TODO 分页的逻辑代码
},
prevPage: function() {
if (this.nowPage == 1) {
return;
}
this.changePage(this.nowPage - 1);
},
nextPage: function() {
if (this.nowPage == this.pageList.length) {
return;
}
this.changePage(this.nowPage + 1);
}
},
});
最后
然后就实现了用Vue来分页的功能,是不是很简单呢
如无特殊说明《Vue.js - 使用Vue实现简简单单的分页功能》为博主MoLeft原创,转载请注明原文链接为:https://moleft.cn/post-219.html
相关文章
- MongoVUE_Vue.js+Flask+MongoDB
- Pinia.js - Vue新一代状态管理器
- Vue(27)vue-codemirror实现在线代码编译器「建议收藏」
- 关于vue-admin-work开源版重大调整
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- 今天讲vue讲解专栏里的VUE组件
- vue.js客服系统实时聊天项目开发(三)实现对话框聊天界面
- vue.js客服系统实时聊天项目开发(十四)点击加载展示历史消息列表
- vue.js客服系统实时聊天项目开发(十五)实现聊天界面滚动到底部
- 网站在线客服系统实时语音视频聊天实战开发,利用peerjs vue.js实现webRTC网页音视频客服系统
- 「.vue文件的编译」2. 模板编译之 simple-html-parser.js
- vue-cli3项目搭建配置以及性能优化
- js ajax 设置代理ip(vue Ajax 设置 代理ip)
- IDEA安装Vue插件后为什么创建.vue文件不显示vue图标
- Vue.js学习笔记
- Vue.js与Oracle数据库——构建完美的前端应用(vueoracle)
- 使用JS实现Redis数据读取(js读取redis)
- Vue.js 与MySQL结合,打造高效Web应用程序(vue.js mysql)
- Vue框架搭建在Redis之上的Web应用(vue请求redis)
- Vue快速连接Redis实现数据存储(vue 直连redis)
- Vue结合Redis实现性能优化(vue引入redis)
- Vue搭配Redis做针对性取值(vue redis取值)
- 从前端JS里请求Redis资源,搭建高性能应用(前端js请求redis)
- Oracle Vue网站助力网站创新,让你的网站飞起来(oracle vue网站)
- CSS和JS标签style属性对照表(方便js开发的朋友)