关于javascript:deep使用情景动态生成的DOM内容不受scoped-样式影响

动静生成的内容

通过 v-html 创立的 DOM 内容不受 scoped 款式影响，然而你依然能够通过深度作用选择器来为他们设置款式。
内容出处：https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E6%B7%B1%E5%BA%A6%E4%BD%9C%E7%94%A8%E9%80%89%E6%8B%A9%E5%99%A8

尽管是细节，然而很影响工作量，过后没理解到这点，写下了如下代码：

    // 绿色晋升空间文字
    promotionTxt(num) {if (num == null) {return '<span > - </span>';}
      return ` <span style="color: ${greenColor}"> ${this.normalTxt(num)} </span> `;
    },
    // 红色预警文字
    lossTxt(num) {if (num == null) {return '<span > - </span>';}
      return ` <span style="color: ${warnColor}"> ${num} </span> `;
    },

因为发现 class 的款式没有用上，只好硬着头皮把 color 写到行内款式里。

现在，还是这段代码，能够欢快的写成：

    // 绿色晋升空间文字
    promotionTxt(num) {if (num == null) {return "<span > - </span>";}
      return ` <span class="green"> ${this.normalTxt(num)} </span> `;
    },
    // 红色预警文字
    lossTxt(num) {if (num == null) {return "<span > - </span>";}
      return ` <span class="red"> ${num} </span> `;
    },

再配上一段 css：

  /deep/.green {color: green;}
  /deep/.red {color: red;}

完满解决，再也不必写丑丑的行内款式了。