Vue插值深入理解：从mustache到v-cloak-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45699925/article/details/102991769

本文详细介绍了Vue中的插值操作，包括mustache语法的变量和表达式使用，v-once指令的单次渲染特性，v-html指令用于呈现HTML内容，v-text指令替换文本，v-pre避免模板解析，以及v-cloak指令在页面加载时的优化应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、mustache语法

mustache语法中,不仅仅可以直接写变量,也可以写一些简单的表达式

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>瓜娃子</title>
</head>
<body>
	<div id="app">
		<h2>{{message}}</h2>
		<h2>{{message}},你好啊!</h2>
		<!--mustache语法中,不仅仅可以直接写变量,也可以写一些简单的表达式-->
		<h2>{{firstName+' '+lastName}}</h2>
		<h2>{{firstName}} {{lastName}}</h2>
		<h2>{{counter * 2}}</h2>
	</div>
	
	<script src="js/vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				message: '瓜娃子',
				firstName: '瓜',
				lastName: '娃子',
				counter: 100
			}
		});
	</script>
</body>
</html>

2、v-once指令的使用

v-once只改变一次,后面修改数据时页面不再修改

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>瓜娃子</title>
</head>
<body>
	<div id="app">
		<!-- v-once只改变一次,后面修改数据时页面不再修改-->
		<h2>{{message}}</h2>
		<h2 v-once>{{message}}</h2>
	</div>
	
	<script src="js/vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				message: '瓜娃子'
			}
		});
	</script>
</body>
</html>

3、v-html指令的使用

把内容转换成html格式打开

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>瓜娃子</title>
</head>
<body>
	<div id="app">
		<h2>{{url}}</h2>
		<!--html格式打开-->
		<h2 v-html="url"></h2>
	</div>
	
	<script src="js/vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				message: '瓜娃子',
				url: '<a href="http://www.baidu.com">百度一下</a>'
			}
		});
	</script>
</body>
</html>

4、v-text指令的使用

会把H2文本中的你好啊覆盖掉

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>瓜娃子</title>
</head>
<body>
	<div id="app">
		<h2>{{message}},你好啊</h2>
		<!--一般不用,会把你好啊覆盖掉-->
		<h2 v-text="message">你好啊</h2>
	</div>
	
	<script src="js/vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				message: '瓜娃子'
			}
		});
	</script>
</body>
</html>

5、v-pre指令的使用

v-pre能够让Vue不解析{{message}}，在浏览器中直接输出{{message}}

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>瓜娃子</title>
</head>
<body>
	<div id="app">
		<h2>{{message}}</h2>
		<!--v-pre  不解析内容 直接输出h2-->
		<h2 v-pre>{{message}}</h2>
	</div>
	
	<script src="js/vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				message: '瓜娃子'
			}
		});
	</script>
</body>
</html>

6、v-cloak指令的使用

可以使用v-cloak来防止加载时显示的{{message}}，只有加载完毕后才显示内容

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>瓜娃子</title>
	<style>
		[v-cloak] { /*//原理,当存在这个属性的时候,不显示*/
			display: none;
		}
	</style>
</head>
<body>
	<!--css样式也要写-->
	<!--只有当vue解析完后才显示,放置js卡的时候直接显示{{message}}文本,影响体验-->
	<!--可以使用v-cloak来防止加载时显示{{message}}-->
	<div id="app" v-cloak>
		{{message}}
	</div>
	
	<script src="js/vue.js"></script>
	<script>
		//在vue解析之前,div中有一个属性v-cloak
		//在vue解析之后,div中没有属性v-cloak
		const app = new Vue({
			el: "#app",
			data: {
				message: '瓜娃子'
			}
		});
	</script>
</body>
</html>