为 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 {&nbsp; color: blue;}>>> .para > p {&nbsp; color: red;}如果您将scoped样式与SASS 一起使用，请使用::v-deep组合器：::v-deep .para > h2 {&nbsp; color: blue;}::v-deep .para > p {&nbsp; color: red;}否则：.para > h2 {&nbsp; color: blue;}.para > p {&nbsp; 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) {&nbsp; color: blue;}:deep(.para > p) {&nbsp; color: red;}