v-html指令

翻滚吧键盘

于 2025-07-02 12:23:07 发布

阅读量1k

点赞数 15

CC 4.0 BY-SA版权

分类专栏： Vue.js 文章标签： html vue.js javascript

本文链接：https://blog.csdn.net/Yqha1/article/details/149067073

Vue.js 专栏收录该内容

64 篇文章

订阅专栏

好的，这是使用 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>
这行代码从 unpkg CDN 服务加载了 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> 元素上。