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

The question 發(fā)布于2019-08-23 16:52 / 2803人閱讀

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

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

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

在單文件組件里，scoped 的樣式不會應(yīng)用在 v-html 內(nèi)部，因?yàn)槟遣糠?HTML 沒有被 Vue 的模板編譯器處理。如果你希望針對 v-html 的內(nèi)容設(shè)置帶作用域的 CSS，你可以替換為 CSS Modules 或用一個額外的全局

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

示例

reference

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/103419.html

相關(guān)文章

VUE知識點(diǎn)集錦

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

Tecode 2019-08-23 16:02 評論0 收藏0
VUE知識點(diǎn)集錦

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

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

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

XboxYan 2019-08-23 15:24 評論0 收藏0
vue2實(shí)踐（持續(xù)更新）

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

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

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

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