{{}}:
純文本內容,不會將html標籤一併輸出,在頁面加載時顯示{{}},所以通常使用v-html和v-text代替。
v-html="":
輸出html標籤中的內容。
v-text="":
純文本內容,會將html標籤一併輸出,與花括號的區別是在頁面加載時不顯示{{}}。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text and html </title>
<script src="vue.js"></script>
</head>
<body>
<div id = "com">
{{c}} <br/>
<h1 v-text="c"></h1>
<h2 v-html="c"></h2>
<hr/>
{{html}} <br/>
<h1 v-text="html"></h1>
<h2 v-html="html"></h2>
</div>
<script>
var a = new Vue({
el:'#com',
data:{
c: "test v-text and v-html",
html: '<h1 style="color:red">Hello Vue!</h1>'
}
});
</script>
</body>
</html>
運行結果截圖: