vue.js 2.0實現(xiàn)簡單分頁效果
更新時間：2019年07月29日 10:36:56 作者：羅兵
這篇文章主要為大家詳細介紹了vue.js 2.0實現(xiàn)簡單分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue.js 2.0實現(xiàn)分頁效果的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>vue.js 2.0 實現(xiàn)的簡單分頁</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 //總頁數(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>
效果圖
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了解決vue移動端適配問題,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了vue后臺返回base64圖片無法顯示的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
Element-ui之ElScrollBar組件滾動條的使用方法
這篇文章主要介紹了Element-ui之ElScrollBar組件滾動條的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
解決vue項目跳轉(zhuǎn)同樣的頁面不刷新的問題思路詳解
做公司官網(wǎng)項目的時候遇到的場景,頂部導航欄分類商品跳轉(zhuǎn)到分類詳情,然后在分類詳情再次點擊頂部導航欄里另外的分類商品,跳到同樣的頁面數(shù)據(jù)不刷新,下面小編給大家分享解決方式,關(guān)于vue跳轉(zhuǎn)不刷新問題感興趣的朋友一起看看吧2023-09-09
這篇文章主要介紹了使用vue中的混入mixin優(yōu)化表單驗證插件,本文是小編給大家總結(jié)的一些表單插件的問題，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-07
這篇文章主要介紹了Vue-Cli項目優(yōu)化操作,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
vue-element如何實現(xiàn)動態(tài)換膚存儲
這篇文章主要介紹了vue-element如何實現(xiàn)動態(tài)換膚存儲問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細介紹了Vue概念及常見命令，介紹了vue.js聲明式渲染、雙向綁定及常用指令,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
vue+element-ui+ajax實現(xiàn)一個表格的實例
下面小編就為大家分享一篇vue+element-ui+ajax實現(xiàn)一個表格的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
最近在做小程序開發(fā)的時候，遇到了點問題。最終選擇用mpvue來做，誰知這么多坑，下面小編把我遇到的問題分享給大家，如果大家對mpvue小程序仿qq左滑置頂刪除組件相關(guān)知識感興趣的朋友一起看看吧2018-08-08