一、基础用法
v-html 指令可以直接将字符串渲染为 HTML 内容，其用法可以十分简单：
<template>
<div v-html="htmlContent"></div>
</template>
<script>
export default {
data() {
return {
htmlContent: "<p>献给所有为了梦想狂奔的人</p>"
}
}
}
</script>
上面的例子中，我们将 data 中的 htmlContent 赋值为一个包含 p 标签的字符串，使用 v-html 渲染到页面中。
二、安全考虑
然而直接使用 v-html 渲染 HTML 字符串有可能会造成安全问题。如果字符串中包含有恶意的代码，那么很有可能会导致 XSS（跨站脚本攻击）风险。因此在 v-html 使用过程中，需要注意一些安全问题。
Vue 3 中提供了一个新的 API：createVNode，可以用于创建虚拟节点，它可以帮助我们更好地渲染动态内容。下面举一个例子，介绍如何在使用 v-html 的同时保证安全性：
<template>
<div :innerHTML="rawHtml"></div>
</template>
<script>
import { createVNode } from 'vue';
export default {
data() {
return {
htmlContent: "alert('malicious code')"
}
},
computed: {
rawHtml() {
const tmp = document.createElement('div');
tmp.innerHTML = this.htmlContent;
const childNodes = Array.from(tmp.childNodes).map(node => {
return node.nodeType === 3 // text node
? createVNode('template', null, { default: () => node.textContent })
: createVNode(node.tagName, null, null, null, Array.from(node.attributes), null, Array.from(node.childNodes).map(n => this.rawHtml(n)));
});
return createVNode('div', null, childNodes);
}
}
}
</script>
通过上面的代码，我们可以将字符串通过 createVNode 来创建虚拟节点，从而避免了直接将字符串渲染到 DOM 中的安全问题。
三、结语
通过本文的讲解，我们可以发现 v-html 指令在 Vue 开发中可以起到十分便捷的作用。但是在使用时需要注意一些安全问题。通过结合 createVNode API 的使用，我们可以更好地渲染动态 HTML 内容，使代码更加健壮、安全。
原创文章，作者：PILP，如若转载，请注明出处：https://www.506064.com/n/138430.html
微信扫一扫 
支付宝扫一扫 