Vue為v-html中標簽添加CSS樣式
阿新 • • 發佈:2018-09-11
true urn 原因 樣式 scope 導致 -html ont 屬性
在最近的vue項目中遇到的問題:v-html渲染的富文本,無法在樣式表中修改樣式;
<template> <div class="msgHtmlBox" v-html=‘msgHtml‘></div> </template> <script> export default{ data(){ return { msgHtml: "<p>https://www.cnblogs.com/yunspider/</p>" } } } </script> <style scoped> .msgHtmlBox p{ color: blue; } </style>
這是為什麽呢?原因很簡單:如果p標簽在template中先寫出來,那麽在<style></style>標簽中是可以修改其樣式的;
這應該是vue編譯的規範,未在虛擬dom中渲染的元素無法修改樣式;
解決方案1:在updated生命周期函數中,js動態配置樣式,代碼如下
updated() { $(‘.msgHtmlBox‘).find(‘p‘).css(‘color‘, ‘blue‘); },
解決方案2:去掉style標簽中的scoped屬性
scoped屬性導致css僅對當前組件生效(用css3的屬性選擇器+生成的隨機屬性實現的),而html綁定渲染出的內容可以理解為是子組件的內容,子組件不會被加上對應的屬性,所以不會應用css.
解決方案3:寫樣式的時候添加>>>
<style scoped> .msgHtmlBox >>> p{ color: blue; } </style>
Vue為v-html中標簽添加CSS樣式