基于vue实现分页效果
2017-11-06 11:55
956 查看
本文实例为大家分享了vue实现分页效果展示的具体代码,供大家参考,具体内容如下
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>分页练习</title> <script src="js/vue.js"></script> </head> <style> .isList{ list-style:none; } .isPadding{ margin:5px; padding:5px; border:2px solid gray; } .isRed{ color:red; } </style> <body> <div id="container"> <p>{{msg}}</p> <ul v-bind:class="{isList:listStyle}"> <li v-for="(tmp,index) in pageNumbers" v-bind:style="{float:isFloat}" v-bind:class="{isPadding:isStyle,isRed:index==pageOne}" @click="changeBg(index)">{{tmp}}</li> </ul> </div> <script> new Vue({ el:"#container", data:{ msg:"Hello VueJs", listStyle:true, isFloat:"left", isStyle:true, pageNumbers:[1,2,3,4,5], pageOne:0 }, methods:{ changeBg:function(myIndex){ this.pageOne = myIndex; } } }) </script> </body> </html>
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <style> ul { list-style:none; } li{ padding:10px; margin:5px; border:1px solid gray; float:left; } .isRed{ color:red; } </style> <script src="js/vue.js"></script> </head> <body> <div id="container"> <p>{{msg}}</p> <ul> <li v-for="(tmp,index) in pageNumbers" v-bind:class="{isRed:index==pageNo}" @click="handleClick(index)">{{tmp}}</li> </ul> </div> <script> new Vue({ el:"#container", data:{ msg:"Hello VueJs", pageNumbers:[1,2,3,4,5], pageNo:0 }, methods:{ handleClick:function(myIndex){ this.pageNo = myIndex; } } }) </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 基于vue.js实现图片轮播效果
- 基于Json的Ajax无刷新分页效果实现(一)
- vue.js框架实现表单排序和分页效果
- 基于MVC模式实现的登录和分页效果的小系统
- 基于Vue实现拖拽效果
- 基于Json的Ajax无刷新分页效果实现(二)
- 基于Vue实现页面切换左右滑动效果
- vue.js 组件实现简单分页效果
- 基于vue.js实现的分页
- 基于vue2.0实现仿百度前端分页效果(一)
- 基于jqGrid实现列表分页效果(后台处理以及pageBean)
- Android基于ListView实现类似Market分页加载效果示例
- ANDROID GridView 分页平滑滑动 效果的实现(基于android TV遥控器操作)
- 基于JS分页控件实现简单美观仿淘宝分页按钮效果
- 基于jquery.page.js实现分页效果
- vue-awesome-swiper - 基于vue实现h5滑动翻页效果
- 基于Json的Ajax无刷新分页效果实现(一)
- 基于vue2.0实现仿百度前端分页效果(二)
- vue2.0与bootstrap3实现列表分页效果
- 基于Vue.js 2.0实现百度搜索框效果