vue采坑之——vue里面渲染html 並添加樣式

在工作中，有次遇到要把返回的字符串分割成兩部分，一部分用另外的樣式顯示。
這時候，我想通過對得到字符串進行處理，在需要特別樣式的字符串片段用html標簽（用的span）包裹起來再通過變量綁定就好了。不過此時綁定變量的vue指令要用v-html。

測試方案的過程很順利。不過后面單獨為自動添加的標簽（span）設定需要的css樣式時（直接在vue單頁面的css區域加的樣式），並沒有起作用，瀏覽器檢查元素style特性也沒有看到設定的屬性。這就很頭大了。無奈，去網上去搜搜看有沒有別人可以借鑒的經驗，沒想到很快就找到了。廢話不多說，解決方案如下：

1、scoped屬性導致css僅對當前組件生效（用css3的屬性選擇器+生成的隨機屬性實現的），而html綁定渲染出的內容可以理解為是子組件的內容，子組件不會被加上對應的屬性，所以不會應用css.解決的話把scoped屬性去掉就行了

生成的隨機屬性就是類似於data-v-146ebe36的東西。 vue中scoped的設計思想就是讓當前組件的樣式不會修改到其它地方的樣式，使用了data-v-hash的方式來使css有了它對應模塊的標識，這樣寫css的時候不需要加太多額外的選擇器，方便很多。

2、另外一種常用的方法利用vue的深度作用選擇器。要為v-html渲染出中的標簽添加CSS樣式，我們需要在寫樣式的時候添加>>>就可以搞定了，如下：

<style scoped>
>>> p {
  font-size: 14px;
  line-height: 28px;
  text-align: left;
  color: rgb(238, 238, 238);
  color: #585858;
  text-indent: 2em;
}
</style>

可以參考另一篇總結比較好的博客文章：https://www.cnblogs.com/goloving/p/9119460.html