zoukankan      html  css  js  c++  java
  • 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 ? 'active' : ''" v-on:click="btnClick(index + 1)">{{ index + 1 }}</a>
                </li>
            </ul>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                cur: 1, //当前页码
                all: 8  //总页数
            },
            watch: {
                cur: function(newVal, oldVal){ // 数值产生变化,触发回调
                    console.log(newVal, oldVal);
                }
            },    
            methods: {
                btnClick: function(i){
                    this.cur = i;
                    // ajax 调取数据...
                }
            }
        })
    </script>
    </html>
    

    效果图

  • 相关阅读:
    关于生产库的表空间是否自己主动扩展的看法?
    Hive创建外部表以及分区
    oninput,onpropertychange,onchange的使用方法和差别
    cacti
    java实现第五届蓝桥杯殖民地
    java实现第五届蓝桥杯殖民地
    java实现第五届蓝桥杯殖民地
    java实现第五届蓝桥杯殖民地
    java实现第五届蓝桥杯殖民地
    java实现第五届蓝桥杯LOG大侠
  • 原文地址:https://www.cnblogs.com/hhh5460/p/6583283.html
Copyright © 2011-2022 走看看