關於Vue 中v-html 失效的緣由

時間 2019-11-08

標籤關於 vue html 失效緣由欄目 HTML 简体版

原文原文鏈接

衆所周知，Vue.js如今愈來愈火，在實際中遇到：html

已知：工具

user.data=&lt;p&gt;請在輸入框內貼入你須要轉換的HTML代碼&lt;/p&gt; 
&lt;br&gt;&lt;p&gt;HTML轉換工具，能夠將HTML代碼轉換爲HTML轉義字符串&lt;/p&gt;

使用{{{}}}解析以後spa

{{{user.data}}}=&lt;p&gt;請在輸入框內貼入你須要轉換的HTML代碼&lt;/p&gt; &lt;br&gt;&lt;p&gt;HTML轉換工具，能夠將HTML代碼轉換爲HTML轉義字符串&lt;/p&gt;

查官方文檔，{{{}}}已經被v-html替代，遂嘗試code

v-html="user.data"
<p>請在輸入框內貼入你須要轉換的HTML代碼</p> <br><p>HTML轉換工具，能夠將HTML代碼轉換爲HTML轉義字符串</p>

確實爲轉譯事後的html片斷，可是在包裹標籤上添加 v-html="user.data",卻只是將轉意解析爲html 代碼,好頭疼，怎麼辦。htm

後來諮詢大神，大神說：給包裹標籤加樣式文檔

style="white-space:pre-wrap"

而後就能正常解析了，好神奇的感受，查一下這個屬性字符串

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。