为 v-html 添加 CSS 样式 [英] Add CSS style to v-html

问题描述

我想在 v-html 中为 HTML 代码添加样式.我尝试了几种解决方案，但没有任何功能:(

这是我的代码:

模板:

脚本:

出口默认{数据 () {返回 {值:<h2>TITLE</h2><p>PARA</p>"}},}

风格:

.para >>>h2{颜色:蓝色；}.para>>>p{红色;}

提前致谢！

解决方案

如果您使用 scoped 样式而没有 SASS，请使用 >>> 组合器这样:

>>>.para>h2{颜色:蓝色；}>>>.para>p{红色;}

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

::v-deep .para >h2{颜色:蓝色；}::v-deep .para >p{红色;}

否则:

.para >h2{颜色:蓝色；}.para>p{红色;}

这是一个演示

I would like to add style to HTML code in a v-html. I tried several solutions but nothing functional :(

Here is my code:

Template :

<div
  class="para"
  v-html="value" 
/>

Script :

export default {
  data () {
    return {
      value : "<h2> TITLE </h2> <p> PARA </p>"
    }
  },
}

Style :

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

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

Thanks in advance !

解决方案

If you're using scoped style without SASS, use the >>> combinator this way:

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

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

If you're using scoped style with SASS, use the ::v-deep combinator:

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

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

Otherwise:

.para > h2 {
  color: blue;
}

.para > p {
  color: red;
}

Here is a demo

这篇关于为 v-html 添加 CSS 样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！