如何动态渲染HTML内容？用v-html！

作者：System 时间：2024年08月23日分类：所有,html 字数：409

在Vue.js中，可以使用v-html指令来动态渲染HTML内容。这个指令会替换元素的 innerHTML，将其内容按普通 HTML 渲染，而不是作为 Vue 模板的一部分进行编译。

下面是一个简单的例子：




<div id="app">
  <div v-html="rawHtml"></div>
</div>




new Vue({
  el: '#app',
  data: {
    rawHtml: '<p>这是动态渲染的HTML内容</p>'
  }
});

在这个例子中，<div>元素的内容将被替换为rawHtml数据属性中的HTML内容。请注意，动态渲染的任何HTML内容可能会带来跨站脚本攻击(XSS)的风险，因此请只对可信的内容使用v-html，而不是用户提交的内容。