<!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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
