vlambda博客
学习文章列表

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