解决Vue中使用v-html渲染数据后CSS不生效
HTML:
<ul clss="VWEB" v-html="xx.xx">
xx.xx里面的内容例如为:
<li>123</li>
<li>123</li>
</ul>
CSS:
/* 常规CSS写法: */
.VWEB li {
text-align: center;
}
原因:
在单文件组件里,scoped 的样式不会应用在 v-html 内部,
因为那部分 HTML 没有被 Vue 的模板编译器处理。
解决办法一:>>>
通过 >>> 可以使得在使用scoped属性的情况下,穿透scoped,
修改其他组件的值
/* >>>写法: */
.VWEB >>> li {
text-align: center;
}
解决办法二:/deep/
如果vue项目使用less或者sass的时候,>>>可能会失效,
可以使用/deep/来代替
/* /deep/写法:*/
.VWEB /deep/ li {
text-align: center;
}