在 Vue 3 中,如果需要显示 HTML 标签,可以使用 v-html 指令
在 Vue 3 中,如果需要显示 HTML 标签,可以使用 v-html
指令。v-html
指令允许你将 HTML 字符串渲染为实际的 HTML 内容。以下是一个简单的示例:
<template><div><div v-html="htmlString"></div></div>
</template><script>
import { ref } from 'vue';export default {setup() {const htmlString = ref('<h1>这是一个标题</h1><p>这是一个段落。</p>');return {htmlString};}
};
</script>
在这个示例中,htmlString
是一个包含 HTML 字符串的响应式变量,v-html
指令将这个字符串渲染为实际的 HTML 内容。
需要注意的是,使用 v-html
时要确保 HTML 内容是可信的,以避免 XSS(跨站脚本攻击)的风险。如果 HTML 内容来自用户输入或不可信的来源,应当对其进行适当的过滤和转义。