/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;
  }

完美解决，再也不用写丑丑的行内样式了。