Vue3 v-html 指令
Vue3 内置指令v-html 指令用于更新元素的 innerHTML，将内容作为原始 HTML 渲染。
基本说明
v-html 指令会将其绑定表达式的值作为 HTML 插入到元素中。这在需要渲染富文本内容时非常有用。
- 期望类型: string
- 作用: 更新元素的 innerHTML，会渲染原始 HTML。
使用场景
1、渲染富文本内容
当从服务器获取 HTML 内容并需要渲染时：
实例
<template>
<div>
<h2>文章内容</h2>
<article v-html="articleContent"></article>
</div>
</template>
<script>
export default {
data() {
return {
articleContent: `
<h3>什么是 Vue.js</h3>
<p>Vue.js 是一个渐进式 JavaScript 框架。</p>
`
}
}
}
</script>
<div>
<h2>文章内容</h2>
<article v-html="articleContent"></article>
</div>
</template>
<script>
export default {
data() {
return {
articleContent: `
<h3>什么是 Vue.js</h3>
<p>Vue.js 是一个渐进式 JavaScript 框架。</p>
`
}
}
}
</script>
安全警告
安全问题：动态渲染任意 HTML 可能导致 XSS（跨站脚本攻击）攻击。务必确保 v-html 的内容是可信的，绝不要在用户提交的内容上使用 v-html。
与 v-text 的区别
| 指令 | 作用 | 示例 |
|---|---|---|
| v-text | 将内容作为纯文本 | v-text="'test'" 显示 <b>test</b> |
| v-html | 将内容作为 HTML 解析 | v-html="'test'" 显示 test（粗体） |