本节知识点
- 介绍v-text和v-html
概述
在HTML输出data中的值我们可以用{{xxx}},但是有的时候比如网速卡的时候。会暴露出我们的{{}},所以这个时候我们就需要v-text和v-html
当我们要是渲染不出来的情况下他就会出现{{xxx}},但是我们要是用了v-text 他要是渲染的慢，则加载不出来。页面上显示的就是null而不是{{message}}了.
简易demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<ul id="app">
<li>{{message}}</li>
<li v-text="message"></li>
<li v-html="messageHtml"></li>
</ul>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
// message:"Hello Vue",
messageHtml:"<h2>hello Vue2</h2>"
}
})
</script>
</html>
- v-html则是里面要嵌套HTML标签。这个要特别小心。在不安全的页面比如注册或者登陆页面千万不要用这个指令。因为会出现XSS攻击。所以千万不要用。
