时间戳

首页 > 解决方案 > 为 v-html 添加 CSS 样式

html - 为 v-html 添加 CSS 样式

问题描述

我想为 .html 文件中的 HTML 代码添加样式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;
}

提前致谢 ！

标签： htmlcssvue.jssassvuejs2

解决方案

如果您使用scoped没有 SASS 的样式，请以>>>这种方式使用组合器：

>>> .para > h2 {
  color: blue;
}

>>> .para > p {
  color: red;
}

如果您在SASS 中使用scoped样式，::v-deep请使用组合器：

::v-deep .para > h2 {
  color: blue;
}

::v-deep .para > p {
  color: red;
}

除此以外：

.para > h2 {
  color: blue;
}

.para > p {
  color: red;
}

这是一个演示

推荐阅读