如何將 html 字符串代碼轉換為實際出現在前端的 html 工作代碼？

Question

我正在使用 v-for"item in items" 然后我的 {{ item.data }} 中有值，這是一個 html 元素，但已經有一個值，例如

{{ item.data }} 的值為字符串“<'qr-code value="this has specific infos that has been created for this specific code"'>"

所以當我只用 {{ item.data }} 在我的頁面上運行它時，它會顯示出來

<'qr-code value="這具有已為此特定代碼創建的特定信息"'>

它打印 html 代碼並且不運行它。

但是當我嘗試復制該代碼並將其粘貼到我的 html 中時，它可以工作。 這就是我怎樣才能把這個字符串代碼變成一個實際工作的 HTML 代碼我該如何解決這個問題？

Answer 1

指令 v-html 會將字符串中的內容呈現為純 HTML，您可以像此示例一樣使用。

<div v-html=“yourVar”></div>

如果您需要更多信息，這里有更多示例：

Answer 2

如果我正確理解了情況，您正在尋找組件標簽。

您可以使用:is="" 設置元素節點類型。