javascript - Vue 3 渲染动态评论

Question

如何在 Vue 3 中正确呈现动态评论？我尝试了在我的情况下不起作用的 v-html，例如https://i.imgur.com/EtrVmGu.png

<template>
  <!-- Method 1: not working properly, https://i.imgur.com/EtrVmGu.png -->
  <template v-html="COMMENT" />

  <!-- Method 2: does not solve the problem, print as string -->
  {{ COMMENT }}

   content here

 <!--[if mso | IE]> </span> <![endif]-->

</template>

<script>
export default {
  setup() {
    const COLOR = "#FF0000";
    const COMMENT = `<!--[if mso | IE]> <span style="background: ${COLOR}"> <![endif]-->`;

    return {
      COMMENT
    }
  }
}
<script>

<div v-html="">不会解决问题，请参阅：https ://i.imgur.com/6tqaQAe.png

标签： javascripthtmlvue.jsvuejs3

Answer 1

这对我有用。

<template>
  <h1>Dynamic Component</h1>
  <div v-html="COMMENT"></div>
</template>

<script>
export default {
  setup() {
    const COLOR = "#FF0000";
    const COMMENT = `<span style="background: ${COLOR}">Comment</span>`;
    return {
      COMMENT,
    };
  },
};
</script>