如何将 HTML 代码分配给 Vue.js 中的变量答案

【问题标题】：How to assign HTML code to a variable in Vue.js如何将 HTML 代码分配给 Vue.js 中的变量
【发布时间】：2021-10-08 10:24:16
【问题描述】：

我想在我的 Vue.js 3 setup() 函数的变量中包含一些 HTML，以便稍后在模板中使用。

当我尝试以下操作时，我收到 "VueCompilerError: Invalid end tag." 错误，因为 Vue 似乎认为它是组件代码的一部分（当然不是）。

<script>
imports...

setup() {

const a = a;
const b = b;

const MyHTML = '<script></script>'  // Vue thinks the </script> tag is part of the code
}
</script> // This gets thrown an error of VueCompilerError: Invalid end tag.

我怎样才能将 HTML 作为字符串存储在变量中而不被 Vue 解释？

【问题讨论】：

您能否发布一个可重现的示例，以便人们可以在干净的环境中验证这不起作用？
你可以用反斜杠const MyHTML = '\<script\>\<\/script\>'

标签： javascript vue.js vuejs3

【解决方案1】：

我对此进行了搜索并找到了几种解决方案。解决方案之一是在线下方。我认为这是最好的解决方案

<div v-html="MyHTML"></div>  
// eslint-disable-next-line no-useless-escape
const MyHTML = ref('<script><\/script>')

另一个有趣的解决方案是

const MyHTML = '...... </scr'+'ipt>......';

【讨论】：