vue.js 2.0实现简单分页效果

(编辑：jimmy 日期: 2024/11/2 浏览：3 次 )

本文实例为大家分享了vue.js 2.0实现分页效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>vue.js 2.0 实现的简单分页</title>
<style>
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box
}

html {
 font-size: 12px;
 font-family: Ubuntu, simHei, sans-serif;
 font-weight: 400
}

body {
 font-size: 1rem
}

.text-center{
 text-align: center;
}

.pagination {
 display: inline-block;
 padding-left: 0;
 margin: 21px 0;
 border-radius: 3px;
}

.pagination > li {
 display: inline;
}

.pagination > li > a {
 position: relative;
 float: left;
 padding: 6px 12px;
 line-height: 1.5;
 text-decoration: none;
 color: #009a61;
 background-color: #fff;
 border: 1px solid #ddd;
 margin-left: -1px;
 list-style: none;
}

.pagination > li > a:hover {
 background-color: #eee;
}

.pagination .active {
 color: #fff;
 background-color: #009a61;
 border-left: none;
 border-right: none;
}

.pagination .active:hover {
 background: #009a61;
 cursor: default;
}

.pagination > li:first-child > a .p {
 border-bottom-left-radius: 3px;
 border-top-left-radius: 3px;
}

.pagination > li:last-child > a {
 border-bottom-right-radius: 3px;
 border-top-right-radius: 3px;
}
</style>
</head>

<body>
 <div id="app">
  <ul class="pagination">
   <li v-for="index in all">
    <a v-bind:class="cur === index + 1 " v-on:click="btnClick(index + 1)">{{ index + 1 }}</a>
   </li>
  </ul>
 </div>
</body>
<script src="/UploadFiles/2021-04-02/vue.js">

效果图

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

上一篇：JavaScript HTML DOM元素节点操作汇总
下一篇：JavaScript如何获取一个元素的样式信息