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

jq进度条

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

color: #fff;

text-align: center;

}

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)

}

})

对比两段代码显然vue要方便许多，因为是双向绑定，不用来回操作dom，就很简单省心啦。

注意问题：刚开始没有实现loading效果，主要是因为用了mounted钩子函数来调用change方法(还是对生命周期理解的不到位)。实现loading效果我们需要在页面加载时自动调用change方法，所以我们应该在数据全部初始化前就执行这一操作。mounted时期已经全部完成初始化，所以便不会成功。

vue中进度条写法_vue实现简单loading进度条相关推荐

Android花样loading进度条（二）-简单环形进度条
背景 Android花样loading进度条系列文章主要讲解如何自定义所需的进度条,包括水平.圆形.环形.圆弧形.不规则形状等. 本篇我们从圆形进度条讲起,讲简单形式的环形进度条,只有进度色彩,没有进 ...
vue中的浏览量_vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践
从列表页 ------> 详情页, 再从详情页 -----> 列表页 ,要保存上次已经加载的数据和自动还原上次的浏览位置 1. 缓存组件,vue2中提供了keep-alive.首先在我们的 ...
Vue中的Diff算法 patch函数-简单Diff算法-双端Diff算法-快速Diff算法-当数据发生改变，视图如何更新？
文章目录 Vue中的Diff算法概述前置知识 patch方法简单Diff算法总结双端Diff算法 --vue2 快速Diff算法 --vue3 vue2和vue3 Diff算法的区别当数据 ...
vue中create 什么触发_vue中eventbus被多次触发（vue中使用eventbus踩过的坑）
一开始的需求是这样子的,我为了实现两个页面组件之间的数据传递,假设我有页面A,点击页面A上的某一个按钮之后,页面会自动跳转到页面B,同时我希望将页面A上的某一些参数携带过去给页面B.(我知道,小参数的 ...
vue 中的el表达式_Vue中vue.filter()的使用方法介绍（过滤）
本篇文章给大家带来的内容是关于Vue中vue.filter()的使用方法介绍(过滤),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. Vue过滤器 {{msg |msgFormat}} ...
vue中this.init用法_Vue中的this.$options.data()和this.$data用法说明
问题项目里遇到一个问题,用this.$options.data()重置组件data时,data()里用this获取的props或method都为undefined,代码简化如下: export de ...
深入理解vue中的slot与slot-scope （简单易懂）
走在前端的大道上插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示和怎样显示. 由于 ...
vue 中provide的用法_vue中的provide和inject
阅读element-ui源码,发现在设计子组时件用到了inject属性,随即查了一下官方文档,得知vue在2.2.0版本里新增了provide / inject: provide 和 inject 主 ...
vue中进度条写法_vue组件实现进度条效果
这篇文章主要为大家详细介绍了vue组件实现进度条效果,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 本文实例为大家分享了vue实现进度条效果的具 ...

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

vue中进度条写法_vue实现简单loading进度条相关推荐

最新文章

热门文章