VUE使用v-html獲取文檔后css樣式不生效
官方关于v-html的解释如下:
在单文件组件里,scoped 的样式不会应用在 v-html 内部,因为那部分 HTML 没有被 Vue 的模板编译器处理。
解决方法:
1、去掉<style scoped>中的scoped,(不建议使用,会改变布局,导致组件之间样式冲突)
<style> .content img{width:100%;height:auto;margin:.5rem auto;} .content .contentimg{width:100%;height:auto;margin:.5rem auto;} </style>
2、通过 >>> 可以使得在使用scoped属性的情况下,穿透scoped,修改其他组件的值
<style scoped> .content >>> img{width:100%;height:auto;margin:.5rem auto;} .content >>> .contentimg{width:100%;height:auto;margin:.5rem auto;} </style>
3、如果vue项目使用less或者sass的时候,>>>可能会失效,可以使用/deep/来代替
<style scoped> .content /deep/ img{width:100%;height:auto;margin:.5rem auto;} .content /deep/ .contentimg{width:100%;height:auto;margin:.5rem auto;} </style>
點擊查看更多內(nèi)容
為 TA 點贊
評論
評論
共同學(xué)習(xí),寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦