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

最新推荐文章于 2024-07-24 16:51:37 发布

cmolong

最新推荐文章于 2024-07-24 16:51:37 发布

阅读量1.8k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/cmolong/article/details/88355357

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

{{}}：
纯文本内容，不会将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>

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