vue中v-text、v-html和{{}}

{{}}:
純文本內容,不會將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>

運行結果截圖:
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章