vue中的v-html,v-text,{{}}三种渲染模板

1. v-html:存在安全性问题。

<input v-model='password' id='password' text='password' placeholder='这是输入的密码'/>
<div>请输入富文本内容:</div>
<div v-html='msg'></div>

<!--
当用户输入:`<img  src='一个不存在的图片地址.png' οnerrοr='console.log(document.getElementById("password").value)'/>`
但这个输入内容填充在v-html='msg'时,就会执行图片,但是因为图片地址是不存在的,
所以会执行报错onerror,此时会打印用户的密码/或者将用户密码发送到别人服务器上,即存在安全问题
-->

2. {{msg}}:当页面渲染过大过慢时,会出现从{{msg}}一闪而过之后消失,重新渲染msg的体验。

3. v-text:相对比较安全,且不会出现{{msg}}一闪而过之后消失,重新渲染msg的体验,但是使用其他不如{{msg}}方便。

发布了200 篇原创文章 · 获赞 37 · 访问量 11万+

猜你喜欢

转载自blog.csdn.net/qq_42231156/article/details/103974937
今日推荐