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的項目,碰到一點關(guān)于Map鍵值對傳參的問題,下面這篇文章主要給大家介紹了關(guān)于Vue中如何使用Map鍵值對傳參的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue使用leafLet方式(繪圖工具),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
element table列表根據(jù)數(shù)據(jù)設(shè)置背景色
在使用elementui中的el-table時,需要將表的背景色和字體顏色設(shè)置為新顏色,本文就來介紹一下element table列表根據(jù)數(shù)據(jù)設(shè)置背景色,感興趣的可以了解一下2023-08-08
這篇文章主要介紹了Vue 固定頭 固定列 點擊表頭可排序的表格組件的相關(guān)資料,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了vuex的幾個屬性及其使用傳參,本文結(jié)合實例代碼給大家講解的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
這篇文章主要為大家介紹了Pinia介紹及工作原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
vue項目中解決 IOS + H5 滑動邊界橡皮筋彈性效果(解決思路)
最近遇到一個問題，我們在企業(yè)微信中的 H5 項目中需要用到table表格（支持懶加載 上劃加載數(shù)據(jù)），但是他們在鎖頭、鎖列的情況下，依舊會出現(xiàn)邊界橡皮筋效果，這篇文章主要介紹了vue項目中解決 IOS + H5 滑動邊界橡皮筋彈性效果,需要的朋友可以參考下2023-02-02
下面小編就為大家分享一篇vue項目中的webpack-dev-sever配置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了Vue.js子組件向父組件通信的方法實例代碼，非常不錯，具有一定的參考價借鑒價值，需要的朋友可以參考下2018-12-12
如何使用el-table實現(xiàn)純前端導出(適用于el-table任意表格)
我們?nèi)粘Ｗ鲰椖?特別是后臺管理系統(tǒng),常常需要導出excel文件,這篇文章主要給大家介紹了關(guān)于如何使用el-table實現(xiàn)純前端導出的相關(guān)資料,本文適用于el-table任意表格,需要的朋友可以參考下2024-03-03