今天忙公司的vue项目，忽然遇到一个问题，循环出来的数据怎么修改它的其中的样式

 <ul id="tbUl">
      <li v-for="item in date" class="wLi">
        <span class="circle"></span>
        <span class="data">{{item-1}}</span>
      </li>
    </ul>

li是循环出来的数据，现在我要修改class的样式，我用了很多方法总是解决不了，最后经过一番折腾，发现vue的一个方法this.$nextTick
官方给出的解释是：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上
在我看来就是v-for循环出标签后，立刻调用其中的方法。代码如下

 this.$nextTick(() => {
          var oWli = document.getElementsByClassName('wLi');
          for(var i = 0; i < oWli.length-1; i++){
            oWli[i].style.width = "60px";
          }
        });