溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

vue如何實(shí)現(xiàn)簡(jiǎn)單loading進(jìn)度條

發(fā)布時(shí)間：2021-04-23 12:58:16 來(lái)源：億速云 閱讀：409 作者：小新 欄目：web開(kāi)發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)vue如何實(shí)現(xiàn)簡(jiǎn)單loading進(jìn)度條，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

為什么要使用Vue

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

一、進(jìn)度條原理

這個(gè)就很簡(jiǎn)單了，也是我們經(jīng)?？梢杂玫降模@里只做一個(gè)最簡(jiǎn)單的，頁(yè)面刷新自動(dòng)加載進(jìn)度條。主要是讓進(jìn)度條的width不斷增加至100%就可以啦~好了，進(jìn)入正題。

二、jquery實(shí)現(xiàn)

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="https://cdn.bootcss.com/foundation/5.5.3/css/foundation.min.css" rel="external nofollow" rel="external nofollow" > 
  <link rel="stylesheet" href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css" rel="external nofollow" rel="external nofollow" > 
  <title>jq進(jìn)度條</title> 
 
</head> 
 
<body> 
  <div id="app"> 
    <div class="progress round alert"> 
      <span class="meter" >0%</span> 
    </div> 
  </div> 
 
 
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script> 
  <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js "></script> 
  <script src="https://cdn.bootcss.com/foundation/5.5.3/js/foundation.min.js "></script> 
  <script> 
    $(function () { 
      var html = $('.meter'); 
      var htmlW = $('.meter').val(); 
      var styleW = parseInt($('.meter').css('width')); 
      var clearInt = setInterval(function () { 
        styleW++; 
        var styleWW = styleW + '%'; 
        html.css('width', styleWW); 
        html.html(styleWW); 
        if (styleW == 100) { 
          clearInterval(clearInt); 
        } 
      }, 20) 
    }) 
  </script> 
</body> 
 
</html>

三、vue實(shí)現(xiàn)

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
  <title>vue進(jìn)度條</title> 
  <link rel="stylesheet" href="https://cdn.bootcss.com/foundation/5.5.3/css/foundation.min.css" rel="external nofollow" rel="external nofollow" > 
  <link rel="stylesheet" href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css" rel="external nofollow" rel="external nofollow" > 
  <style> 
    .bar{ 
      color: #fff; 
      text-align: center; 
    } 
  </style> 
 
</head> 
 
<body> 
  <div id="app"> 
    <div class="progress alert round"> 
      <span class="meter bar" : >{{proBar}}</span> 
    </div> 
  </div> 
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script> 
  <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js "></script> 
  <script src="https://cdn.bootcss.com/foundation/5.5.3/js/foundation.min.js "></script> 
  <script> 
    var app = new Vue({ 
      el: '#app', 
      data: { 
        proBar: 0, 
      }, 
      created(){ 
        this.change(); 
      }, 
      methods: { 
        change: function() { 
            var clearInt = setInterval(function() { 
              app.proBar++; 
              console.log(app.prpBar); 
              if (app.proBar == 100) { 
                clearInterval(clearInt); 
              } 
            }, 20) 
 
        } 
      } 
    }) 
  </script> 
 
</body> 
 
</html>

對(duì)比兩段代碼顯然vue要方便許多，因?yàn)槭请p向綁定，不用來(lái)回操作dom，就很簡(jiǎn)單省心啦。

注意問(wèn)題：剛開(kāi)始沒(méi)有實(shí)現(xiàn)loading效果，主要是因?yàn)橛昧薽ounted鉤子函數(shù)來(lái)調(diào)用change方法（還是對(duì)生命周期理解的不到位）。實(shí)現(xiàn)loading效果我們需要在頁(yè)面加載時(shí)自動(dòng)調(diào)用change方法，所以我們應(yīng)該在數(shù)據(jù)全部初始化前就執(zhí)行這一操作。mounted時(shí)期已經(jīng)全部完成初始化，所以便不會(huì)成功。

關(guān)于“vue如何實(shí)現(xiàn)簡(jiǎn)單loading進(jìn)度條”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手