Blogger Information
Blog 250
fans 3
comment 0
visits 321532
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Vue自学:V-cloak指令的使用方式
梁凯达的博客
Original
854 people have browsed it

<!DOCTYPE html>

<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
<body>
<div id="app" v-cloak>
{{message}}
</div>
</body>
<script type="text/javascript">
setTimeout(function(){
//V-cloak原理:当页面的Vue绑定元素未访问更新出来时,页面隐藏直到页面显示
//由于HTML页面是自上而下的解析页面的,当解析到类似{{}}的时候,并不会解析出来
//只有当遇到了vue实例化代码的时候,{{}}才会被识别
//所以v-cloak指令的用处,是当该模块还没有完全解析的时候,先屏蔽该模块
//需要在css上增加隐藏代码:V-cloak
let app = new Vue({
el:’#app’,
data:{
message:’test’
}
})
},2000)
</script>
</html>

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post