好的，这是使用 CDN 方式引入 Vue 3 并演示 v-html 指令的代码。
v-html 指令
v-html 用于更新元素的 innerHTML。它的内容会被当作普通的 HTML 解析并插入。
示例代码
这是一个完整的 HTML 文件，您可以直接将其保存为 .html 文件并在浏览器中打开查看效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3 v-html 示例 (CDN)</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
padding: 20px;
font-size: 1.2rem;
}
#app {
max-width: 600px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
}
.warning {
background-color: #fffbe6;
border: 1px solid #ffe58f;
padding: 10px;
border-radius: 4px;
color: #d46b08;
}
</style>
</head>
<body>
<div id="app">
<h2>v-html 示例</h2>
<div v-html="rawHtml"></div>
<hr style="margin: 20px 0;">
<h2>普通文本插值 (v-text 或 {{}})</h2>
<div>{{ rawHtml }}</div>
<hr style="margin: 20px 0;">
<div class="warning">
<p><strong>安全警告:</strong></p>
<p v-html="warningMessage"></p>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
// 2. 创建 Vue 应用
const { createApp, ref } = Vue;
const app = createApp({
setup() {
// 3. 定义一个包含 HTML 标签的字符串
const rawHtml = ref('<span style="color: red;">这是一个红色的 span 标签</span><br><strong>这是加粗的文本。</strong>');
const warningMessage = ref('在你的网站上动态渲染任意 HTML 是非常危险的，因为它很容易导致 <a href="https://zh.wikipedia.org/zh-cn/跨網站指令碼" target="_blank">XSS 攻击</a>。请只在内容安全可靠的情况下使用 `v-html`，并且<strong>永远不要</strong>用它来渲染用户提交的内容。');
return {
rawHtml,
warningMessage
};
}
});
// 4. 挂载应用到 #app 元素上
app.mount('#app');
</script>
</body>
</html>
代码解释
引入 Vue 3 CDN：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
这行代码从unpkgCDN 服务加载了 Vue 3。加载后，会创建一个全局的Vue对象。创建 Vue 应用实例：
const { createApp, ref } = Vue;
我们从全局的Vue对象中解构出createApp方法来创建应用，以及ref函数来创建响应式数据。定义数据：
在setup()函数中，我们定义了一个名为rawHtml的响应式引用（ref），它的值是一个包含 HTML 标签的字符串。使用
v-html：
<div v-html="rawHtml"></div>
这行代码是核心。Vue 会将rawHtml变量中的字符串解析为 HTML，并将其设置为这个<div>元素的内部 HTML 内容。您会看到一个红色的<span>标签和一个加粗的<strong>标签被正确渲染。对比普通插值：
<div>{{ rawHtml }}</div>
为了对比，我们还展示了如果使用普通的双大括号{{ }}插值会发生什么。在这种情况下，HTML 标签会被当作纯文本显示，而不会被浏览器解析。这是 Vue 为了防止 XSS 攻击而采取的默认安全措施。挂载应用：
app.mount('#app');
将我们创建的 Vue 应用挂载到id为app的<div>元素上。
⚠️ 重要安全警告
v-html 可以很方便地渲染动态 HTML，但也非常危险。如果 v-html 渲染的内容是用户提交的，那么恶意用户可能会注入 <script> 标签或其他恶意代码，从而导致跨站脚本攻击（XSS）。
黄金法则：
- 只在完全信任内容来源的情况下使用
v-html。 - 永远不要将用户输入的内容直接用
v-html渲染。 如果必须这么做，请务必使用专业的 HTML 清理库（如 DOMPurify）对内容进行严格的过滤和消毒。