在vue中将从数据库中获得的字符串显示成标签.

Question

从数据库读取一个字符串,例如: 这种形式.将这个字符串保存到一个常量.
需要将这个字符串显式成标签.
内容大概是下面这个样子:

<script setup>
const temp = "<icon-home  />";
</script>
<template>
<span v-html="temp "></span>
<span>{{temp }}</span>
</template>

都不能正常显示这个标签,请问有什么办法能将字符串(字符串是标签格式)显示成标签了?

Answer 1

楼主可以看看我的方案 如果可以 点个采纳 多谢 。要将一个字符串作为标签来显示，可以使用 Vue 的动态组件或 v-html 指令。下面是使用这两种方式的示例：

1. 使用动态组件：
   • 在模板中，将要显示的标签字符串作为一个动态组件的名称。
   • 使用 component 元素包裹，将动态组件名称绑定到 is 属性上。
   • 使用动态组件的方式，Vue 会根据组件名称动态地渲染对应的组件。

<template>
  <component :is="temp"></component>
</template>

1. 使用 v-html 指令：
   • 在模板中，将要显示的标签字符串绑定到 v-html 指令上。
   • v-html 指令会将字符串作为 HTML 解析，并将其渲染为对应的标签。

<template>
  <span v-html="temp"></span>
</template>

请注意，在使用 v-html 指令时，要确保字符串内容来自可信任的来源，并且没有包含恶意代码，以防止安全风险。

另外，请注意，在 Vue 3 中，使用 <script setup> 语法时，暂时无法直接访问组件中的数据和方法。因此，你可以将 const temp = "<icon-home />"; 移动到 setup() 函数中，并通过返回值的方式将其暴露给模板使用。

<script setup>
import { ref } from 'vue';

const temp = ref("<icon-home />");

export default {
  setup() {
    return {
      temp
    };
  }
};
</script>
<template>
  <component :is="temp"></component>
  <span v-html="temp"></span>
</template>

通过这种方式，你可以在 Vue 组件中将字符串作为标签格式正确地显示出来。