vue v-html渲染后,樣式不生效


Vue.js官方文檔中,對於插值有如下兩種寫法:

1.文本

  1)<div class="item-head">{{data.head}}</div>

  2)<div v-text="data.head"></div>

2.純HTML

  1)<div class="item-head">{{data.head}}</div>

 

如果data:{

  head:"this is a item's <em>head</em>, the <em>head's</em> name is red!"

}

兩種渲染之后的結果分別是

文本:<div class="item-head">this is a item's <em>head</em>, the <em>head's</em> name is red!</div>

 純HTML:<div class="item-head">this is a item's head, the head's name is red!</div>

但是發現純html中的em樣式並沒有被渲染出來,想了幾種可能性,最后問題定位到

嘗試去掉style 中 scoped屬性后,問題解決
有兄弟在sf中這樣解釋

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM