使用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 。