LLEARNING NOTES

技术 · 思考 · 实践 · 成长

首页/Vue2/正文

Vue基础指令-v-html

Vue2620 次阅读


v-html渲染html样式效果

   1、如果输出的内容是html数据,双大括号将数据以普通文本方式输出,为了输出真正html的效果,就需要使用v_html指令

   2、防止xss攻击


<p v-html="contentHtml">{{ contentHtml }}</p>

<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
      el:'#app',
      data: {
         message:'hello vue',
         score:10,
         contentHtml:`<span style="color:red">此内容字体颜色为红色<script> alert('hello')<\/script></span>`
      }
    });
</script>


结果:

image.png

无论人生上到哪一层台阶,阶下有人在仰望你,阶上亦有人在俯视你,你抬头自卑,低头自得,唯有平视,才能看见真实的自己。

评论交流

理性讨论,共同进步
验证码

相关文章

继续阅读