vue进度条带字

HTML 

<ul>
    <li v-for="item in items">
          <div class="progress">
             <span class="progressing" v-bind:style=" 'width:' + (item.time/17)*100 +'%' ">
                <span class="percentage">{{item.time}}/17</span>
              </span>
           </div>
     </li>
</ul>

JS 

data() {
        return {
            items: [
                {
                    id: '01',
                    name: '名人组',
                    gradePerson: '王小虎',
                    person: '5人',
                    time: '10',
                }, {
                    id: '02',
                    name: '名人组',
                    gradePerson: '王小虎',
                    person: '5人',
                    time: '5',
                }, {
                    id: '03',
                    name: '名人组',
                    gradePerson: '王小虎',
                    person: '5人',
                    time: '8',
                }]

        }

}

CSS

 .progress{
        width: 100%;
        height: 15px;
        background: #f1dea9;
        border: 1px solid #ecc353 ;
        border-radius: 10px;
        text-align: center;
        color:#fff;
        .progressing{
              position: relative;
              float: left;
              margin: 0 auto;
              height: 16px;
              background: #ecc353;
              border-radius: 10px;
              .percentage{
                   margin-left:50px;
              }
         }
   }