为 v-html 添加 CSS 样式

Question

我想将样式添加到v-html. 我尝试了几种解决方案，但没有任何功能:(这是我的代码：模板 ：<div  class="para"  v-html="value" />脚本 ：export default {  data () {    return {      value : "<h2> TITLE </h2> <p> PARA </p>"    }  },}风格 ：.para >>> h2 {  color: blue;}.para >>> p {  color: red;}提前致谢 ！

Answer 1

如果您使用scoped不带 SASS 的样式，请按>>>以下方式使用组合器：

>>> .para > h2 {

  color: blue;

}

>>> .para > p {

  color: red;

}

如果您将scoped样式与SASS 一起使用，请使用::v-deep组合器：

::v-deep .para > h2 {

  color: blue;

}

::v-deep .para > p {

  color: red;

}

否则：

.para > h2 {

  color: blue;

}

.para > p {

  color: red;

}

这是一个演示

Answer 2

2023 使用 Vue 3 + Vite 编辑：现在，当您尝试使用上述解决方案时，您将收到此警告：

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

所以，用这个代替

:deep(.para > h2) {

  color: blue;

}

:deep(.para > p) {

  color: red;

}