vue+定时器 自动变化的进度条

一、定时器的写法：（本例运用的是setInterval）

（1）对定时器使用的基本理解  

定时器名 = setInterval(“要执行的函数名”，定时时间毫秒);   //定时器

clearInterval(“定时器名”);                              //取消定时器

（2）本例中应用的模式

var id=setInterval(()=>{
	    a=this.processbar();
	    console.log("a is"+a+typeof a);
	    if(a===100){
	    	  clearInterval(id);
	    	  console.log("执行了clearInterval函数");
	    }
	  },100);

二、vue制作的前提环境 

       1、进度条的基本效果内容html与css部分见：https://blog.csdn.net/ColourfulTiger/article/details/82910505

       2、vue部分的雏形环境见：https://blog.csdn.net/ColourfulTiger/article/details/82912036

三、本例内容定时器应用的方式

       不说废话，上代码：

<div class="progress-bar">
	<div class='box'>
	   <div class='clip' id="context" :style="[Width]"></div>
	</div>
	<span><span id="number">{{num}}</span><i>%</i></span>
</div>

       定时器使用部分 ：结合vue的生命周期中的mounted使用。

mounted(){
  	console.log("mounted");
     var a=0;
  	 var id=setInterval(()=>{
	    a=this.processbar();
	    console.log("a is"+a+typeof a);
	    if(a===100){
	    	  clearInterval(id);
	    	  console.log("执行了clearInterval函数");
	    }
	  },100);
  },

      基本配置方面： 

data () {
    return {
      msg: 'layout',
      num: 0,   //方法一
      test:false,
      Width:{
      	"width":"0px",
      }
    }
  },
  methods:{
  	processbar(){
		this.num++;
		this.Width={
		 "width": this.num +'px',
		}
		if(this.num > 100){
		  this.num = 100;
		}
		console.log("this.num is" +typeof this.num);
		return this.num;
      }
  }

效果图：

可以看到定时器起作用了，同时当数据为100时，取消定时器的函数也起到效果了。