v-for循环出的数据怎么修改其样式(this.$nextTick)
2018-03-07 18:18
483 查看
今天忙公司的vue项目,忽然遇到一个问题,循环出来的数据怎么修改它的其中的样式
li是循环出来的数据,现在我要修改class的样式,我用了很多方法总是解决不了,最后经过一番折腾,发现vue的一个方法this.$nextTick
官方给出的解释是:将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上
在我看来就是v-for循环出标签后,立刻调用其中的方法。代码如下
<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"; } });
相关文章推荐
- for 循环 从数据库取数据,每5条数据后面有一个点划线样式。
- MYSQL插入数据,修改数据,误操作怎么恢复实例
- for循环使用range遍历数组尝试修改元素值的问题
- linux shell 读取for循环中出现难处理的数据之单引号错误实例
- socket_read 收不到数据,怎么修改超时时间?
- js把for循环出来的数据存入数组
- 取出json中[{},{}] 的数据 ,使用 for-in 来循环对象的属性
- hibernate save数据的时候报错:ids for this class must be manually assigned before calling save()
- Matlab修改for循环次数
- CSS选择器修改样式,及单独修改样式this.style.
- PB.怎么知道数据窗口中哪些行修改了?
- (ASP.Net)MVC4怎么设置@Html.TextBoxFor样式
- 带样式的数据怎么入库后在显示时还是有样式
- Oracle For 循环添加数据
- EDITOR-CALL FOR itab .修改内表数据
- js图片预加载---for与onload事件,图片数据模型到界面的单项绑定,使用interval模拟循环操作
- [初学笔记] matlab中怎么把数据循环写入txt文件
- jquery $.each 和for 怎么跳出循环(终止本次循环)
- hibernate保存数据的时候出现:ids for this class must be manually assigned before 错误
- 怎么在for里面再次循环!