快捷導(dǎo)航

vue.js 2.0實(shí)現(xiàn)簡(jiǎn)單分頁(yè)效果

更新時(shí)間：2019年07月29日 10:36:56 作者：羅兵

這篇文章主要為大家詳細(xì)介紹了vue.js 2.0實(shí)現(xiàn)簡(jiǎn)單分頁(yè)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue.js 2.0實(shí)現(xiàn)分頁(yè)效果的具體代碼，供大家參考，具體內(nèi)容如下

<!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>

效果圖

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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