vue.js 2.0实现的简单分页
生活随笔
收集整理的這篇文章主要介紹了
vue.js 2.0实现的简单分页
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>vue.js 2.0 實(shí)現(xiàn)的簡(jiǎn)單分頁(yè)</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, //當(dāng)前頁(yè)碼all: 8 //總頁(yè)數(shù)},watch: {cur: function(newVal, oldVal){ // 數(shù)值產(chǎn)生變化，觸發(fā)回調(diào)console.log(newVal, oldVal);}}, methods: {btnClick: function(i){this.cur = i;// ajax 調(diào)取數(shù)據(jù)...}}})
</script>
</html>
效果圖
總結(jié)
以上是生活随笔為你收集整理的vue.js 2.0实现的简单分页的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微软发布.NET Core Tools
- 下一篇： ButterKnife不同版本配置