Vue – v-cloak 的应用

tzming • 2023-03-01 • Vue, 前端 • 631 阅读

简介

v-cloak 是 Vue 的一个特殊的属性，没有属性值，使用很简单。

 

v-cloak

属性存在的意义

我们知道，Vue是一个js框架，被导入到html中加载使用，通过Vue渲染页面上特有的变量名可以实现数据的实时变化，但是如果在html页面还没有完全加载Vue.js文件时，Vue 实例也并没有被实例化时，html又会被提前被渲染，那么类似{{ prop }} 这样的变量属性就会被显示出来。

待Vue.js加载完成后，Vue实例被创建完成后，{{ prop }} 这样的变量又会瞬间被Vue所接管渲染成真正的数据。导致页面出现闪现现象，影响用户体验。

 

属性解决思维

Vue认为，可以存在那么一个标记属性，配合 css 样式来使这些未被渲染的变量暂时被隐藏，在当Vue实例化加载完成后，就会把这个标记属性去掉，css 样式随之失效，随即显示渲染完成的数据，避免页面闪现的发生。

 

属性的使用

<head>
    <title>title</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-cloak>{{student.name}}</div>
    </div>
</body>

在开发时，可以在标签中加入 v-cloak 标签，并通过设置 [v-cloak] 的css样式来使它暂时隐藏。

待Vue被实例化后，变量数据完成渲染，v-cloak 将被销毁，css样式失效，来实现即时显示渲染数据后的内容。

 

 

如果您喜欢本站，点击这儿不花一分钱捐赠本站

这些信息可能会帮助到你： 下载帮助 | 报毒说明 | 进站必看

修改版本安卓软件，加群提示为修改者自留，非本站信息，注意鉴别

THE END
分享
二维码
打赏
海报
Vue – v-cloak 的应用
简介 v-cloak 是 Vue 的一个特殊的属性，没有属性值，使用很简单。   v-cloak 属性存在的意义 我们知道，Vue是一个js框架，被导入到html中加载使用，通过Vue渲染页面上特有的变量名可以……
<<上一篇
下一篇>>