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

最新推荐文章于 2025-10-20 19:29:40 发布

原创最新推荐文章于 2025-10-20 19:29:40 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

4 篇文章

订阅专栏

本文通过实例对比了Vue中v-text与v-html指令的使用效果，演示了如何在页面上安全地插入HTML代码及纯文本。v-text用于显示纯文本，而v-html则用于解析并显示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>

运行结果截图：
在这里插入图片描述