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