使用vue.js渲染API調用中的轉義HTML

Question

我正在嘗試渲染從Vue的api調用返回的數據。

數據的一部分以轉義html的形式出現，如下所示：

body: "<ul> ↵ <li>This is <strong>Test 
Text.</strong></li> ↵</ul>"

我嘗試了如下的v-html指令：

      <div  v-for="(item, index) in filteredList"> 
         <div v-html="item.body"></div>
      </div>

它正在渲染，但是具有可見的錨標簽，完全如下所示，ul，li，強標簽在瀏覽器中都可見

  <ul> <li>This is &nbsp;<strong>Test Text</strong></li> </ul>

我嘗試過解碼功能（使其與v-html完全相同），一個消毒插件，查看了此帖子Vue模板-將HTML特殊字符（數字）轉換為符號？ 和許多其他東西，但我似乎無法正確渲染

Answer 1

您可以嘗試使用DOMParser 。

 const doc = new DOMParser().parseFromString("<li>", "text/html"); const textContent = doc.documentElement.textContent; console.log(textContent); 

在這里運行完之后，您可以將結果傳遞給v-html 。