溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關vue如何實現簡單loading進度條，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。
一、進度條原理
這個就很簡單了，也是我們經常可以用到的，這里只做一個最簡單的，頁面刷新自動加載進度條。主要是讓進度條的width不斷增加至100%就可以啦~好了，進入正題。
二、jquery實現
<!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進度條</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實現
<!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進度條</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>對比兩段代碼顯然vue要方便許多，因為是雙向綁定，不用來回操作dom，就很簡單省心啦。
注意問題：剛開始沒有實現loading效果，主要是因為用了mounted鉤子函數來調用change方法（還是對生命周期理解的不到位）。實現loading效果我們需要在頁面加載時自動調用change方法，所以我們應該在數據全部初始化前就執行這一操作。mounted時期已經全部完成初始化，所以便不會成功。
關于“vue如何實現簡單loading進度條”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
