精灵图（sprite 雪碧图）在vue for 循环中的使用问题

背景：想做一个类似于csdn博客的排行页面，排行的序号是一张精灵图，根据不同的位置来实现的。

最终实现效果如下：

准备工作：

1. 精灵图
   

2. vue组件部分代码

<div class="blog" v-for="(item, index) in userDetails" :key="index"> 
          <div class="item">
            <span class="number rank-number"></span>
          </div>
</div>

3. css相关代码, 设置背景精灵图

.number {
  display: block;
  width: 44px;
  height: 44px;
  background-image: url("../assets/img/rank_index_icon.png");
  background-repeat: no-repeat;
  background-size: 440px 440px;
}

一开始我是采用的网上的方法，在mounted里面拿到所有图片的span, 然后用for循环的方式，给每一个span设置backgroundPosition ，来实现。

实现代码如下：

    /* 1.获取所有i 会形成伪数组  */
    var icons = document.getElementsByClassName("number");
    var countX = 0;
    var countY = 0;
    // console.log(icons.length);  //问题出现了: 在这里打印出来的结果是0
    for (var i = 0; i < icons.length; i++) {
        // 通过设置精灵图的x和y坐标来设置不同li的背景图        
        var index_x = countX * 44;
        var index_y = countY * 44;
        icons[i].style.backgroundPosition = '-' + index_x + 'px  -' + index_y + 'px';
       //console.log(index_x);
        //console.log(index_y);
        countX++;
        if ((i + 1) % 10 == 0) {
            countX = 0;
            countY++;
        }
    }

出现的问题： 获取到的icons的length是0，所以页面上显示的全是第一名的图标。然后我就想着用动态style的方式来做。最后成功实现了，思路就是，在获取到数据后，对数据进行遍历，给每一个数组对象新增一个number属性，在for循环中，给style的backgroundPosition 动态赋值，相关代码如下：

需要修改下vue页面代码：

<div class="blog" v-for="(item, index) in userDetails" :key="index"> 
          <div class="item">
            <span class="number rank-number" :style="{ backgroundPosition: item.number }"></span>
          </div>
</div>

// 设置精灵图位置
        data.forEach((e, i) => {
          var index_x = countX * 44;
          var index_y = countY * 44;
          countX++;
          if ((i + 1) % 10 == 0) {
            countX = 0;
            countY++;
          }
          e.number = "-" + index_x + "px  -" + index_y + "px";
        });

最终成功解决。