本節(jié)知識(shí)點(diǎn)
- 介紹v-text和v-html
概述
在HTML輸出data中的值我們可以用{{xxx}},但是有的時(shí)候比如網(wǎng)速卡的時(shí)候。會(huì)暴露出我們的{{}},所以這個(gè)時(shí)候我們就需要v-text和v-html
當(dāng)我們要是渲染不出來的情況下他就會(huì)出現(xiàn){{xxx}},但是我們要是用了v-text 他要是渲染的慢，則加載不出來。頁面上顯示的就是null而不是{{message}}了.
簡(jiǎn)易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標(biāo)簽。這個(gè)要特別小心。在不安全的頁面比如注冊(cè)或者登陸頁面千萬不要用這個(gè)指令。因?yàn)闀?huì)出現(xiàn)XSS攻擊。所以千萬不要用。
