v-text和v-html指令
我们用在用{{}}这种模板输出是有弊端的就是当我们网速很慢或者javascript出错时,会暴露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-text&v-html</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-text&v-html</h1>
<hr>
<div id="app">
<span>{{message}} </span>
<!-- 当网速较慢,js有错时上面span标签里的内容不会被渲染会暴露{{}}
而加了v-text会就把js 渲染的内容提前给绑定message标签里
-->
<span v-text="message"></span>
<!-- v-html生产环境中动态渲染HTML是非常危险的,会引起xss的攻击
永远不要在用户提交表单可操作的网页上使用
-->
<span v-html="dodo"></span>
</div>
<script typt="text/javascript">
var app = new Vue({
el:"#app",
data:{
message:'hello 你好',
dodo:'<h2>hello world</h2>'
}
})
</script>
</body>
</html>