Javascript Vue 3渲染动态注释

如何在Vue 3中正确呈现动态注释？例如，我尝试了v-html，但它在我的情况下不起作用

{{COMMENT}}
满足于此
导出默认值{
设置（）{
const COLOR=“#FF0000”；
常量注释=``；
返回{
评论
}
}
}

---

无法解决此问题，请参阅：

应将

v-html

装入真实的html标记，而不是虚拟的

模板

：

  <div v-html="COMMENT" ></div>

您可以在检查过的DOM中看到注释，这对我很有用

动态分量
导出默认值{
设置（）{
const COLOR=“#FF0000”；
const COMMENT=`COMMENT`；
返回{
评论,，
};
},
};

---

您也可以将动态组件与

并将所有注释组件代码放在另一个文件中：comment.vue

<template>
  <h1>Dynamic Component</h1>
  <component :is='currentComponent'>
</template>

<script>
import CommentComponent from './comment.vue'
export default {
  computed: {
    currentComponent() {
      // do some logic then
      return CommentComponent
    }
  }
};
</script>

动态分量
从“./comment.vue”导入CommentComponent
导出默认值{
计算：{
currentComponent（）{
//那你就来点逻辑吧
返回注释组件
}
}
};

谢谢你的回答，我需要不带任何标签直接打印出来。我已经更新了我的代码，以便您能够理解用例。它是html注释，无法在页面中显示。这就是问题所在，您的问题不够清楚，请解释morediv无法解决此问题，请看另一条评论中有一个结束语：@DelowarHosain为了获得帮助，不要试图否决答案，因为这会阻止人们帮助你

<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>

<template>
  <h1>Dynamic Component</h1>
  <component :is='currentComponent'>
</template>

<script>
import CommentComponent from './comment.vue'
export default {
  computed: {
    currentComponent() {
      // do some logic then
      return CommentComponent
    }
  }
};
</script>