vue进度条+定时器，实现自动变化

实现思路：
1.添加一个class名为Progress 的 div，即进度条外边框。
2.接着，在上面的 div 内，添加一个class名为jindu的div
3.class.jindu的style宽度使用百分比，例如 style=“50%”; 表示进度条在 50% 的位置。
代码

<div>
	<div class="Progress">
	    <div class="jindu" 
	    :style="{
	        width:jindu+'%',
	    }">
	    </div>
	</div>
	<button>开始</button>
	<button>停止</button>
</div>

export default {
    data(){
        return{
            jindu:50,
        }
    },
}

.Progress{
    width: 1400px;
    height: 30px;
    margin: 0 auto;
    margin-top: 50px;
    border: 1px solid gray;
    box-shadow: -1px -1px 1px #000;
    background: rgb(177, 174, 174);
    .jindu{
        height: 100%;
        background: #3165c5;
        overflow: hidden;
    }
}

如图所示，进度条的样式已经呈现了。通过改变data里面的jindu值，来改变显示的进度。

下面添加定时器，点击开始按钮动态的把进度值传给data里面的jindu。

首先给按钮点击事件

<button @click="progress()">开始</button>
<button @click="stop()">停止</button>

setInterval定时器基本写法：
定时器名 = setInterval(“要执行的函数名”，定时时间毫秒); //定时器
clearInterval(“定时器名”); //取消定时器

jindu开始默认值设为0，添加定时器名

data(){
   return{
        jindu:0,
        clearInt:null//定时器名
    }
},

methods:{
   progress(){
      let _this=this;
       _this.clearInt=setInterval(function(){
           _this.jindu++;
           if(_this.jindu==100){
               clearInterval(_this.clearInt);
           }
       },100);
   },
   stop(){
       clearInterval(this.clearInt);
   }
}

到这里写的定时器就起作用了，效果图如下：

数据为100时，取消定时器的函数也起到作用了

点击停止，同样也可实现取消定时