Vue技术—v-cloak指令

最新推荐文章于 2024-07-04 10:12:44 发布

小恶魔ly

最新推荐文章于 2024-07-04 10:12:44 发布

阅读量199

点赞数

分类专栏： vue.js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/u013140948/article/details/122209134

版权

vue.js 专栏收录该内容

60 篇文章 1 订阅

订阅专栏

本文介绍了Vue的v-cloak指令，该指令用于在Vue实例初始化完成前隐藏未编译的Mustache语法，避免页面加载时出现闪烁效果。通过CSS配合v-cloak，可以确保在模板编译完成之前隐藏内容，提升用户体验。示例代码展示了如何使用v-cloak和相应的CSS规则来实现这一功能。

摘要由CSDN通过智能技术生成

v-cloak指令（没有值）：

1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

<style>
	[v-cloak]{
		display:none;
	}
</style>
<div id="root">
	<h2 v-cloak>{{name}}</h2>
</div>
<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
<script>
	new Vue({
		el:'#root',
		data:{
			name:'hello'
		}
	})
</script>