今天在vue项目中遇到了一个问题,无论怎么修改v-html中元素的样式都不能生效,记录一下:
查看了下vue的API文档,v-html中有如下一段话:
在单文件组件里,
scoped
的样式不会应用在v-html
内部,因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对v-html
的内容设置带作用域的 CSS,你可以替换为 CSS Modules 或用一个额外的全局<style>
元素手动设置类似 BEM 的作用域策略。
那么在scoped的样式怎么修改v-html中的元素样式呢?
在css中:
.wrapper >>> img{
display: block;
width: 100%;
}
在scss中:
.wrapper {
::v-deep img {
display: block;
width: 100%;
}
}