Vue.js中v-html渲染的dom添加scoped的樣式

The question 發布于2019-08-23 16:52 / 2810人閱讀

摘要：在中，要將一段字符串渲染成，可以使用指令。但是官方文檔中的部分也提醒了在單文件組件里，的樣式不會應用在內部，因為那部分沒有被的模板編譯器處理。這種情況下你可以使用操作符取而代之這是一個的別名，同樣可以正常工作。

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

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

在單文件組件里，scoped 的樣式不會應用在 v-html 內部，因為那部分 HTML 沒有被 Vue 的模板編譯器處理。如果你希望針對 v-html 的內容設置帶作用域的 CSS，你可以替換為 CSS Modules 或用一個額外的全局

上述代碼將會編譯成：
.a[data-v-f3f3eg9] .b { /* ... */ }
有些像 Sass 之類的預處理器無法正確解析 >>>。這種情況下你可以使用 /deep/ 操作符取而代之——這是一個 >>> 的別名，同樣可以正常工作。

示例

reference

https://cn.vuejs.org/v2/api/#...
https://vue-loader-v14.vuejs....
https://segmentfault.com/q/10...
https://blog.csdn.net/zgh0711...

GPU云服務器云服務器 js中添加div樣式 js中下拉列表的樣式 js中添加類的方法 DOM渲染

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/103419.html

VUE知識點集錦

摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態可以包含任意異步操作。 vue基礎 1、 router 路由與 a 標簽的區別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實現雙向數據綁定的原理就是利用了 Object.defineProperty() 這個...

Tecode 2019-08-23 16:02 評論0 收藏0
VUE知識點集錦

摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態可以包含任意異步操作。 vue基礎 1、 router 路由與 a 標簽的區別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實現雙向數據綁定的原理就是利用了 Object.defineProperty() 這個...

APICloud 2019-08-02 14:34 評論0 收藏0
Vue.js基礎教程

摘要：自定義名稱縮放控制器可以使用中的動畫設計更為華麗的效果。在和中必須使用，不然它們會同時生效，動畫也會瞬間完成。先在標簽內加入，接著類似自定義動畫可以給命名。文章鏈接：Vue.js基礎教程開發工具準備：根據個人喜歡選擇IDE，我使用的是WebStorm，推薦使用Atom和VSCode；安裝git base和node.js；安裝vue-cli，命令npm i -g @vue/...

XboxYan 2019-08-23 15:24 評論0 收藏0
vue2實踐（持續更新）

摘要：記錄一些小技巧和踩過的坑由于本篇文章內容太多，導致編輯器有點卡，所以新開辟了一篇實踐二，后續再這里更新。組件的生命周期函數是在標簽里的數據發生變化時候觸發數據可能更新了，但是沒有綁定到上面的話，不會調用鉤子函數。記錄一些小技巧和踩過的坑由于本篇文章內容太多，導致SF編輯器有點卡，所以新開辟了一篇 vue2實踐（二），后續再這里更新。 1. props 帶不帶冒號的區別 ...

n7then 2019-08-20 15:05 評論0 收藏0
VUE.js第三課模板語法

摘要：模板語法使用了基于的模版語法，允許開發者聲明式地將綁定至底層實例的數據。的核心是一個允許你采用簡潔的模板語法來聲明式的將數據渲染進的系統。指令用于在表達式的值改變時，將某些行為應用到上。 Vue.js 模板語法 Vue.js 使用了基于 HTML 的模版語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。 Vue.js 的核心是一個允許你采用簡潔的模板語法來聲明式的將數...

lx1036 2019-06-27 16:34 評論0 收藏0