Vue如何實現(xiàn)簡易翻頁效果

這篇文章將為大家詳細(xì)講解有關(guān)Vue如何實現(xiàn)簡易翻頁效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)服務(wù)項目包括甘井子網(wǎng)站建設(shè)、甘井子網(wǎng)站制作、甘井子網(wǎng)頁制作以及甘井子網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，甘井子網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到甘井子省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測試性更強的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

源碼如下：

<html>
<head>  <meta charset="UTF-8">
  <title>slidePage</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <style type="text/css">
   *{
     margin: 0;
     padding: 0;
   }
   .container {
     width: 100%;
     margin: 0 auto;
     text-align: center;
   }
   .content{
     font-size: 400px
   }
   .leftBtn{
     width: 45px;
     height: 45px;
     margin-right: 15px;
   }
   .rightBtn{
     width: 45px;
     height: 45px;
     margin-left: 15px;
   }
  </style>
</head>
<body>
<div id='root'>
  <div v-if="numberArr.length == 0">{{showMessage}}</div>
  <div class="container" v-for="(item, index) in getCurPageContent(numberArr, curPage, itemNumPerPage)" :key="index">
   <div class="content">{{item}}</div>
   <div class="pageButtonList">
     <button class="leftBtn" @click="handleClick('leftBtn')"><</button>
     <span class="pagination">{{curPage}}/{{totalPage}}</span>
     <button class="rightBtn" @click="handleClick('rightBtn')">></button>
   </div>
  </div>
</div>
<script>
  new Vue({
    el: "#root",
    data(){
      return {
        showMessage: 'No number',
        content:'',
        numberArr: [1, 2, 3, 4],
        curPage: 1,
        totalPage: 1,
        itemNumPerPage: 1
      }
    },
    mounted() {
      this.init()
    },
    methods:{
      init(){
        this.totalPage = Math.ceil(this.numberArr.length / this.itemNumPerPage)
        this.totalPage = this.totalPage < 1 ? 1 : this.totalPage
      },
      getCurPageContent: function(numberArr, curPage, itemNumPerPage){
        return numberArr.filter(function(element, index){
          if(index >= (curPage -1)* itemNumPerPage && index < curPage *itemNumPerPage){
            return true
          }else{
            return false
          }
        })
      },
      handleClick: function(arg){
        if(arg == 'leftBtn'){
          this.curPage = this.curPage > 1 ? --this.curPage : this.totalPage
        }else if (arg == 'rightBtn'){
          this.curPage = this.curPage < this.totalPage ? ++this.curPage: 1
        }
      }
      // handleLeftClick: function(){
      //   if(this.curPage > 1){
      //     this.curPage --
      //   }else{
      //     this.curPage = this.totalPage
      //   }
      // },
      // handleRightClick: function(){
      //   if(this.curPage < this.totalPage){
      //     this.curPage ++
      //   }else{
      //     this.curPage = 1
      //   }
      // }
    }
  })
</script>
</body>
</html>

效果如下所示，點擊左右能切換頁面：

Vue如何實現(xiàn)簡易翻頁效果

關(guān)于“Vue如何實現(xiàn)簡易翻頁效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

新聞名稱：Vue如何實現(xiàn)簡易翻頁效果
當(dāng)前地址：http://www.jbt999.com/article2/jeicic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、云服務(wù)器、App設(shè)計、企業(yè)建站、定制網(wǎng)站、營銷型網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容