Vue 中 v-html 渲染 HTML 代码的使用方法

技术文摘

2025-01-10 18:31:29 小编

在 Vue 开发中，v-html 指令是一个强大的工具，它允许我们在模板中渲染 HTML 代码。这个指令对于需要展示富文本内容的场景非常有用，比如显示从服务器端获取的包含 HTML 标签的文本。

让我们看看如何基本使用 v-html。假设我们有一个 Vue 实例，并且在 data 选项中有一个包含 HTML 代码的字符串。例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-html 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-html="htmlContent"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                htmlContent: '<p style="color: red;">这是一段使用 v-html 渲染的 HTML 代码</p>'
            }
        });
    </script>
</body>
</html>

在上述代码中，我们在 Vue 实例的 data 中定义了 htmlContent 变量，然后在模板中使用 v-html 指令将这个变量的值渲染为 HTML 内容。浏览器最终会显示一段红色的文本。

然而，使用 v-html 也有一些需要注意的地方。由于 v-html 会直接渲染 HTML 代码，这可能带来安全风险，特别是当渲染的内容来自用户输入时。如果用户输入了恶意的脚本代码，通过 v-html 渲染后可能会导致 XSS（跨站脚本攻击）。在使用 v-html 渲染用户输入的内容时，一定要对内容进行严格的过滤和验证。

另外，v-html 渲染的内容不会参与 Vue 的响应式系统。也就是说，如果 htmlContent 的值发生了变化，Vue 不会自动重新渲染 v-html 部分。如果需要实现动态更新，可以通过一些技巧来达到目的，比如使用计算属性结合 data 中的变量。

v-html 指令在 Vue 中为我们提供了渲染 HTML 代码的便捷方式，但在使用过程中要充分考虑安全和性能问题，确保我们的应用程序稳定、安全地运行。掌握好 v-html 的使用方法，能让我们在处理富文本内容时更加得心应手，提升开发效率。

TAGS: html渲染 Vue开发 Vue_v-html v-html用法

万千站长工具

技术文摘

Vue 中 v-html 渲染 HTML 代码的使用方法

欢迎使用万千站长工具！