基于vue实现分页效果

2024-05-06 15:24:44

字体：大中小

来源：转载

供稿：网友

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

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

上一篇：mongoose设置unique不生效问题的解决及如何移除unique的限制

下一篇：vue组件父子间通信之综合练习（聊天室）