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

Question

我想在Vue.js 3setup()函数的变量中包含一些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解释吗?

Answer 1

我搜索了一下，找到了几个解决方案。其中一个解决方案是在线下。我认为这是最好的解决方案

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

另一个有趣的解是

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