mui 多個進度條

$4614@.com
其實這個很簡單,只是苦於本身當時對mui並不熟悉,因此繞了很大的坑,下面貼出代碼!

1.文檔結構代碼

<div id="app"> <ul id="demo"> <li v-for="(item,index) in items"> <p class="mui-progressbar mui-progressbar-in" :data-progress="item.num"><span></span></p> </li> </ul> </div>

2.JS 代碼

window.onload=function(){

 new Vue({ 

 el:"#app",

 data:{ 

 items:[ {num:10}, {num:20}, {num:30}, {num:40} ]

 }

 })

 mui('#demo .mui-progressbar').each(function(){ mui(this).progressbar({progress:this.getAttribute("data-progress")}).show(); }) }

注意:在寫的時候 必定要肯定#demo .mui-progressbar上面有data-progress 這個屬性,否則是不起做用的.