数据渲染的结构，获取HTMLCollection对象为空，length为0,转数组无效

当前结构是获取数据遍历得到

<div v-for="(item,index) in list" :key="index">
	<div class="wordlogo">{{item.companypic}}</div>
</div>

给list赋值之后调用头部改色函数，但是此时无效

//data
return {
	color: ['#15A892','#1574A8','#A89215','#74A815','#D24EE9']
}
methods: {
	getList(){
		//此处是接口请求 省略
		var th = this
		th.list = res.data.list
		th.headSet()
	},
	headSet(){
		var th = this
        var long = th.color.length
        var box = document.getElementsByClassName('wordlogo')
        var boxarr = Array.prototype.slice.call(box)
        var len = boxarr.length
        // console.log(boxarr,len) 此时会发现打印的是空数据和0
        for(var i = 0; i<len; i++){
            var high = '32px'
            if(th.list[i].companypic.length > 2){
                high = '16px'
            }
            var ran = Math.round(Math.random()*long)
            box[i].style.backgroundColor = th.color[ran]
            box[i].style.lineHeight = high
        }
	}
}

此时会发现打印的是空数据和0,box 是一个HTMLCollection对象。
Array.prototype.slice.call是把box转为一个数组，可以遍历操作每一个数组中的节点。

解决办法就是为结构的渲染做一个延迟

将上面的headSet延迟半秒，才能拿到结构。

th.list = res.data.list
setTimeout(() => {
    th.headSet()
},500)

现在headSet函数改变颜色和行高就生效了，这当中实际原因就是获取到的数组为空，for循环没能达到执行的要求。因为length为0，所以等结构遍历完成再去用class获取就好了