我想將樣式添加到v-html. 我嘗試了幾種解決方案，但沒(méi)有任何功能:(這是我的代碼：模板 ：<div class="para" v-html="value" />腳本 ：export default { data () { return { value : "<h2> TITLE </h2> <p> PARA </p>" } },}風(fēng)格 ：.para >>> h2 { color: blue;}.para >>> p { color: red;}提前致謝 ！
2 回答
POPMUISE
TA貢獻(xiàn)1765條經(jīng)驗(yàn) 獲得超5個(gè)贊
如果您使用scoped不帶 SASS 的樣式，請(qǐng)按>>>以下方式使用組合器：
>>> .para > h2 {
color: blue;
}
>>> .para > p {
color: red;
}
如果您將scoped樣式與SASS 一起使用，請(qǐng)使用::v-deep組合器：
::v-deep .para > h2 {
color: blue;
}
::v-deep .para > p {
color: red;
}
否則：
.para > h2 {
color: blue;
}
.para > p {
color: red;
}
這是一個(gè)演示
倚天杖
TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超3個(gè)贊
2023 使用 Vue 3 + Vite 編輯：現(xiàn)在，當(dāng)您嘗試使用上述解決方案時(shí)，您將收到此警告：
[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.
所以，用這個(gè)代替
:deep(.para > h2) {
color: blue;
}
:deep(.para > p) {
color: red;
}
- 2 回答
- 0 關(guān)注
- 225 瀏覽
添加回答
舉報(bào)
0/150
提交
取消