关于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;  }

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