用Vue的动态样式加上Css写进度条
进度条主要是由两部分组成:
由底层的一个100%长度的总条(背景条)和一个上层任意长度(可以根据后台调用的数据来动态改变上层的进度条长度)的进度条组成,类名"progress_out"是底层的背景条,类名"progress_in"是上层的进度条,"progress_width"是自己在定义的变量,当然啦这个变量要在0~100之间,进度条不能超过底层的背景条。我这里给宽度定义的是90%,vue的写法也要正确才行。
效果图:
html代码
<p>
<span class="progress_out">
<span class="progress_in" :style="{