vue改变元素html,vue 通过v-html动态渲染的html元素 设置样式问题 $nextTick

例如，我们从后端接口中获取来这么一大串html代码需要填充至我们页面当中去

image.png

通过v-html设置上去后，我们在style里面设置样式是设置不上去的

这个时候就要用到$nextTick,通过js来设置样式

if(res.data.code == 200) {

console.log(res)

let dataList = res.data.data.content

let text = document.getElementById('text')

for(let i = 0; i < dataList.length;i++) {

for(let j = 0; j < dataList[i].length;j++) {

this.text = dataList[i][0].post_content

this.$nextTick(function () {

for(let i = 0;i < text.children.length;i++) {

text.children[i].style.marginBottom = '20px'

text.children[i].children[0].style.fontSize = '12px'

text.children[i].children[0].style.lineHeight = '20px'

text.children[i].children[0].style.color = '#666666'

text.children[i].children[0].style.width = '100%'

if(text.children[2].children[0].nodeName == 'IMG') {

text.children[i].style.textIndent = 0

} else {

text.children[i].style.textIndent = '2em'

}

}

})

}

}

}