解决Vue中使用v-html渲染数据后CSS不生效

Posted 2021-04-04 Web前端开发小能手

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;}