我有這樣的資料:
data: {
content:"<p><span style=\"font-size:16px\">Berikut adalah beberapa pemberontakan yang pernah terjadi di daerah.</span></p>\r\n\r\n<p><span style=\"font-size:16px\"><strong>1. Pemberontakan Angkatan Perang Ratu Adil (APRA) </strong></span></p>\r\n\r\n<ul>\r\n\t<li><span style=\"font-size:16px\">di Bandung, pada 23 Januari 1950.</span></li>"
}
從我想使用 Vue js 顯示的資料中。
這是我的 Vue js 代碼:
<div class="row px-3" v-html="data.content"></div>
如果上面的代碼被執行,那么結果是這樣的:

您可以看到,\r \n 和 \t 似乎沒有被 Vue js 渲染
如何讓 Vue js 渲染 \r \n 和 \t 并顯示如下?

uj5u.com熱心網友回復:
\r, \n, 和\t不是有效的 HTML;它們是在其他語言中使用的轉義序列(因此期望它們在 HTML 中作業就像將 python 代碼粘貼到 javascript 檔案中并期望它運行一樣。)您需要將它們替換為執行您希望它執行的操作的 HTML . 對于新行,<br>可以使用標簽,但傳統上人們通過將其部分包裝在段落 ( <p>) 或 div ( <div>) 中來處理換行符。對于制表符,您需要在谷歌上搜索如何處理 HTML 中的縮進,因為關于它的內容比我在此處的簡短回答中所能解釋的要多得多。
uj5u.com熱心網友回復:
我沒有完整的代碼,但在第一次閱讀之后:
嘗試
v-html="content"
和
data(){
return {
content: "<p><span style=\"font-size:16px\">Berikut adalah beberapa pemberontakan yang pernah terjadi di daerah.</span></p>\r\n\r\n<p><span style=\"font-size:16px\"><strong>1. Pemberontakan Angkatan Perang Ratu Adil (APRA) </strong></span></p>\r\n\r\n<ul>\r\n\t<li><span style=\"font-size:16px\">di Bandung, pada 23 Januari 1950.</span></li>"
}
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/qukuanlian/409274.html
標籤:
