基于vue实现分页效果

时间：2021-05-18

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章