插值表达式闪烁,网络慢Vue先显示花括号变量名

最新推荐文章于 2022-05-10 16:22:35 发布

曾冠男

最新推荐文章于 2022-05-10 16:22:35 发布

阅读量387

点赞数 1

分类专栏： Web 文章标签： vue.js node.js html web reactjs

本文链接：https://blog.csdn.net/u010511598/article/details/106196885

版权

Web 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

插值表达式闪烁,网络慢vue先显示花括号变量名

使用Vue的插值表达式有个坑，就是当网络加载慢的时候，Vue.js还没加载到浏览器来，如下代码：

<body>
	<div id="app">
		<p>{{ msg }}</p>
	</div>
</body>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			msg:'123'
		}
	})
</scirpt>

会先显示

{{ msg }}

再显示

这样的用户体验感肯定是不好的，有如下解决方案：

解决办法一：使用Vue的v-cloak指令：

<style>
	[v-cloak]{
		display:none;
	}
</style>
<body>
	<div id="app">
		<p v-cloak>{{ msg }}</p>
	</div>
</body>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			msg:'123'
		}
	})
</scirpt>

完美解决！

解决办法二：使用Vue的v-text指令：

<body>
	<div id="app">
		<p v-text>{{ msg }}</p>
	</div>
</body>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			msg:'123'
		}
	})
</scirpt>

优惠劵

曾冠男

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
插值表达式闪烁,网络慢Vue先显示花括号变量名

插值表达式闪烁,网络慢vue先显示花括号变量名使用Vue的插值表达式有个坑，就是当网络加载慢的时候，Vue.js还没加载到浏览器来，如下代码：<body> <div id="app"> <p>{{ msg }}</p> </div></body><script> var app = new Vue({ el:"#app", data:{ msg:'123' } })</scirp
复制链接

扫一扫