vue3 如何渲染html标签
在 Vue 3 中，如果你想渲染 HTML 标签而不是将它们作为纯文本显示，你需要确保这些 HTML 内容是安全的，以防止 XSS（跨站脚本）攻击。
Vue 提供了 v-html 指令来渲染元素内的 HTML。
下面是一个简单的例子展示如何使用 v-html 指令来渲染 HTML 字符串：
<template>
<div id="app">
<div v-html="unsafeHtml"></div>
</div>
</script>
<script setup>
import { ref } from 'vue';
const unsafeHtml = ref('<p>Hello Vue!</p>');
</script>在这个例子中，unsafeHtml 是一个包含 HTML 字符串的响应式属性。v-html 指令告诉 Vue 将这个字符串作为 HTML 渲染到 DOM 中。
需要注意的是，这里的变量名称为 unsafeHtml 是为了提醒我们直接渲染用户提供的数据可能会导致安全问题。
如果你的数据来源于不可信的源，你应该对其进行适当的净化处理。
可以使用类似 dompurify 这样的库来净化 HTML，确保不会执行任何恶意脚本。
例如，你可以这样使用 dompurify：
<template>
<div v-html="safeHtml"></div>
</template>
<script setup>
import { ref } from 'vue';
import { JSDOM } from 'jsdom';
import DOMPurify from 'dompurify';
const windowWithJSDOM = new JSDOM('').window;
DOMPurify.setConfig({ WINDOW: windowWithJSDOM });
const unsafeHtml = '<p>Hello, <b>world!</b></p>';
const safeHtml = ref(DOMPurify.sanitize(unsafeHtml));
</script>在这个示例中，我们使用了 DOMPurify 来确保我们的 HTML 是安全的。
这很重要，因为直接使用 v-html 可能会带来安全风险。确保在生产环境中总是净化你的 HTML 数据。
