【VueJS】为防止暴露 {{xxx}} 而诞生的v-text & v-html
2018-01-03 22:07
260 查看
之前我们在html中输出data中的值时用的是
Vue给我们提供的
如果在data中写有html标签,用
需要注意的是:在生产环境中动态渲染HTML是非常危险的,因为容易导致XSS攻击。所以只能在可信的内容上使用
{{xxx}},这种情况是有弊端的:当网速很慢或JavaScript出错时,会暴露
{{xxx}}。
Vue给我们提供的
v-text就是解决这个问题的。我们来看代码:
<div id="app"> <span>{{ message }}</span>=<span v-text="message"></span><br/> <span v-html="msgHtml"></span> </div> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ message:'hello Vue!', msgHtml:'<h2>hello Vue!</h2>' } }) </script>
如果在data中写有html标签,用
v-text是不能输出的,这时候我们就需要用
v-html标签了。
需要注意的是:在生产环境中动态渲染HTML是非常危险的,因为容易导致XSS攻击。所以只能在可信的内容上使用
v-html,永远不要在用户提交和可操作的网页上使用。
相关文章推荐
- $().attr()的用法 && $().html()与$().text()的区别
- text/html & text/plain的区别
- <%@page contentType="text/html;charset=gbk"%>与<meta http-equiv="Content-Type" content="text/html; ch
- HtmlTextNode & HtmlCommentNode
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- “客户端响应类型为text/html ;encoding=utf-8”解决方案
- text-decoration <del> <s> 实现横线从文字中间穿过的CSS效果属性和html标签
- 【DOM操作】实时监听input[type='text']和HTML标签中属性改变事件
- iOS"Request failed: unacceptable content-type: text/html"
- response.setContentType("text/html"); 必须注明,否则导致解析不正确了
- OS"Request failed: unacceptable content-type: text/html"
- text/html & text/plain的区别
- iOS"Request failed: unacceptable content-type: text/html"
- html中去掉文本框(input type="text")的边框或只显示下边框
- text/html & text/plain的区别
- 样式表单 /easyui.css 未载入,因为它的MIME类型 "text/html" 不是 "text/css"
- html中去掉文本框(input type="text")的边框或只显示下边框
- AFN —— unacceptable content-type: text/html"
- header("Content-type:text/html;charset=utf-8")含义
- jQuery -> 获取/设置HTML或TEXT内容