如何将 html 字符串代码转换为将出现在前端的实际 html 工作代码？答案

【问题标题】：How to convert html string code into an actual html working code that will appear in front end?如何将 html 字符串代码转换为将出现在前端的实际 html 工作代码？
【发布时间】：2020-04-30 04:14:09
【问题描述】：

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

{{ item.data }} 的值为字符串“"

所以当我只用 {{ item.data }} 在我的页面上运行它时，它会显示出来

它打印 html 代码而不是运行它。

但是当我尝试复制该代码并将其粘贴到我的 html 中时，它可以工作。这就是我怎样才能把这个字符串代码变成一个实际工作的 HTML 代码我该如何解决这个问题？

【问题讨论】：

标签： javascript html vue.js templates

【解决方案1】：

指令 v-html 会将字符串中的内容呈现为纯 HTML，您可以像这个示例一样使用。

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

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

https://nexladder.com/vuejs-tutorial/vuejs-v-html-directive

【讨论】：

我试过了，但是会有问题。如果我将它放在我的 data -> content: 中，那么该值将是固定的，而不是像我想要的那样动态。
因为我在 for 循环中使用 {{ items.data }}，如果我将 v-html 放在标签上，由于内容固定，我的所有迭代都将具有相同的值。
尝试在循环结束后立即使用 this.$forceUpdate()

【解决方案2】：

如果我对情况的理解正确，您正在寻找组件标签。

您可以使用 :is="" 设置元素节点类型。

您可以在此处找到更多信息： https://vuejs.org/v2/guide/components.html#Dynamic-Components

【讨论】：