vue用v-html加載渲染,裏面的內容樣式不生效

作一個商品的詳情頁,須要輸出富文本的內容,須要設置裏面的圖片樣式最大寬度100%。但是設置img 100%後沒反應,看F12檢查元素也沒加上去。css

解決方法有2個:
一、scoped屬性致使css僅對當前組件生效(用css3的屬性選擇器+生成的隨機屬性實現的),而html綁定渲染出的內容能夠理解爲是子組件的內容,子組件不會被加上對應的屬性,因此不會應用css.解決的話把scoped屬性去掉就好了。html

二、另一種經常使用的方法利用vue的深度做用選擇器。要爲v-html渲染出中的標籤添加CSS樣式,咱們須要在寫樣式的時候添加>>>就能夠搞定了,以下:vue

.desc-detail .desc-view >>> img{
    display: block;
    max-width: 100%;
  }

若是使用方法2,是不能用less或者scss,須要使用css語法,不然會報錯css3

相關文章
相關標籤/搜索