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>
结果: