sass @for方法的使用

要实现的效果如图----------续航里程进度条

上代码----

          <div>
            <h4 class="car-number">{{carNumber}}</h4>
            <div class="electricity "
                 :class="itemNumber">
                 <!-- 续航里程条 -->
              <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
              <span class="battery-life">
                <!-- sub 下标标签 -->
                <sub>约</sub>
                <strong>{{batteryLife}}</strong>
                <sub>KM</sub>
              </span>
            </div>

 data() {
    return {
      fit: 'contain',
      url:
        'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      carStyle: '福克斯2019款',
      styleDetial: '新能源汽车 5座',
      carNumber: '豫 A1M8L2',
      batteryLife: 600,
      itemNumber: 'item-5',
      carPark: '某某停车场'
    }
  },

  .electricity {
    display: flex;
    align-items: center;
    margin-top: 5px;
  }
  .electricity li {
    display: inline-block;
    width: 7px;
    height: 24px;
    margin-right: 3px;
    background-color: #e1e1e1;
    border-radius: 100px;
  }
  // 但是这么选择就固定写死了
  // .electricity li:nth-child(-n+5){
  //   background-color: #9999ff;
  // }
  // 改进---用sass中的方法 @for
  @for $i from 1 through 10 {
    .item-#{$i} {
      li:nth-child(-n + #{$i}) {
        background-color: #9999ff;
      }
    }
  }

这里只是静态页面展示，后期调接口可以将对 itemNumber 重新赋值