vue中进度条写法_vue实现简单loading进度条

刚学习vue不久，今天试着用vue做了一个简单的loading进度条，对于vue的生命周期和钩子函数又有了新的理解，下面分享给大家，绝对入门级。

一、进度条原理

这个就很简单了，也是我们经常可以用到的，这里只做一个最简单的，页面刷新自动加载进度条。主要是让进度条的width不断增加至100%就可以啦~好了，进入正题。

二、jquery实现

jq进度条

0%

$(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)

})

三、vue实现

vue进度条

.bar{