提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Vue中v-cloak的具体使用

Vue 具体 使用
2023-09-11 14:19:18 时间

目录

Vue中v-cloak的具体使用

源代码 点击

  • 这一个指令是为了防止在数据或者Vue实例还没有加载的时候，屏幕上出现双大括号表达式的情况 详情点击

1. 语法

html

<div v-cloak>
  {{ message }}
</div>

css

[v-cloak] {
  display: none;
}

2. example

  1. 我们新建一个文件，写上如下代码
<body>
	<div id="app">
		<h2>v-cloak test</h2>
		<p>{{message}}</p>
	</div>		
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.5/vue.js"></script>
	<script type="text/javascript">
		alert('coco')
		new Vue({
			el:'#app',
			data:{
				message:'look at me'
			}
		})
	</script>
</body>
  1. 当我们打开网页运行的时候，就会出现以下画面
    在这里插入图片描述

为了避免这种情况我们可以用上v-cloak指令

  • 在p标签上添加v-cloak
  • 并写上css
[v-cloak]{
	/* 写完之后，一定要重新打开一个页面 */
	display: none;
}
  • 我们在重新打开一个网页，就发现问题解决了

3. 原理

  • 其实他是利用了当模板被编译好后，所有的指令都会被移除，这一特点，然后利用属性选择器将v-cloak的模板进行隐藏
  • 当模板编译好后v-cloak的属性也就不再存在，模板也就显现出来

相关文章