vue 插值操作

v-once

<div id="app" v-once>{{msg}}</div>
		<!-- 此后上面的msg不会发生改变 -->
		<script src="../vue.js"></script>
		<script>
			// let 是变量  const是常量
			let app = new Vue({
				el:'#app',
				data:{
					msg:'不知道',
					}
				})
		</script>

v-html

<div id="app">
<h2 v-html="url"></h2></div>
<script>
			let app = new Vue({
				el:'#app',
				data:{
					url:'百度'
					}
				})
		</script>

v-text

<div id="app">
<h2 v-text="msg"></h2></div>
<script>
			let app = new Vue({
				el:'#app',
				data:{
					msg:'不知道'
					}
				})
		</script>

v-cloak / v-prep

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			[v-cloak]{
				display:none;
			}
		</style>
	</head>
	<body>
		<div id="app">
		<!-- v-pre 是原封不动的显示出来,不做任何解析 -->
		<h2 v-pre>{{msg}}</h2>
		<!-- v-cloak 防止卡顿,直接显示,偶有问题,可以延迟 -->
		<!-- 解析之前,有这个属性 -->
		<!-- 在解析之后就没有 -->
		<h2 v-cloak>{{msg}}</h2>
		</div>
		<script src="../vue.js"></script>
		<script>
			let app = new Vue({
				el:'#app',
				data:{
					msg:'不知道'
					}
				},1000)
		</script>
	</body>
</html>

你可能感兴趣的:(vue)