v-for循环出的数据怎么修改其样式（this.$nextTick）

今天忙公司的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";
}
});