vue指令v-html和v-text

v-html 和 v-text 是 Vue.js 中用于操作元素内容的指令。

1. v-text

   • 作用：设置元素的textContent。
   • 用法：<div v-text="message"></div>。如果 message 的值为 "Hello", 那么渲染后的 HTML 会是 <div>Hello</div>。
   • 安全性：因为 v-text 只会解析文本内容，所以它是安全的，不会解析任何 HTML 标签。

2. v-html

   • 作用：更新元素的innerHTML。
   • 用法：<div v-html="htmlContent"></div>。如果 htmlContent 的值为 "<h1>Hello</h1>", 那么渲染后的 HTML 会是 <div><h1>Hello</h1></div>。
   • 安全性：v-html 会解析 HTML 内容，所以存在安全风险。当你使用 v-html 渲染用户提供的内容时，存在 XSS (跨站脚本) 攻击的风险。确保你完全信任任何动态渲染的 HTML 内容，并考虑使用像 DOMPurify 这样的库来清理和消毒 HTML 内容，以防止潜在的攻击。

总结：当你只需要渲染纯文本内容时，使用 v-text；当需要渲染 HTML 内容时，使用 v-html，但要确保内容是安全的，避免潜在的 XSS 攻击。