本文實例為大家分享了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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
圖片精選
