Vue.js中v-html渲染的dom加入scoped的樣式的方法介紹

這篇文章帶給大家的內容是關於Vue.js中v-html渲染的dom添加scoped的樣式的方法介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

在vue.js中，要將一段字串渲染成html，可以使用v-html指令。

但是官方文件中的v-html部分也提醒了

在單一文件元件裡，scoped 的樣式不會套用在v -html 內部，因為那部分HTML 沒有被Vue 的模板編譯器處理。如果你希望為 v-html 的內容設定帶有作用域的 CSS，你可以替換為 CSS Modules 或用一個額外的全域
上述程式碼將會編譯成：
.a[data-v-f3f3eg9] .b { / .. . / }
有些像Sass 之類的預處理器無法正確解析>>>。這種情況下你可以使用 /deep/ 運算子取代－這是一個 >>> 的別名，同樣可以正常運作。

範例

<div v-html="contentView"></div>

<style scoped>
.product-content {
    ...
    /deep/ h4 {
      color: #333;
      ...
    }
  }
</style>

【相關推薦：JavaScript影片教學】

以上是Vue.js中v-html渲染的dom加入scoped的樣式的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！