已解决：插值表达式快速新刷闪动问题

最新推荐文章于 2022-04-10 10:31:24 发布

谢去非

最新推荐文章于 2022-04-10 10:31:24 发布

阅读量197

点赞数

分类专栏： vue基础文章标签： vue js

本文链接：https://blog.csdn.net/ryyzxf/article/details/109375012

版权

vue基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中插值表达式在页面加载时可能出现的闪烁现象及其原因，主要是由于数据替换的延迟导致。为了解决这个问题，可以使用`v-cloak`指令配合CSS样式来隐藏未编译的Mustache标签，确保在数据准备好后再显示，从而消除闪烁。通过在HTML元素上添加`v-cloak`并设置相应的CSS，可以在等待数据渲染期间保持页面的平滑体验。

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

原因

vue先将插值表达式直接显示在页面当中，然后再快速的进行替换。但当网络不好，或进程卡顿时会产生闪烁的现象。

解决

1.提供样式
[v-cloak] {
display: none;
}
2.在插值表达式所在的标签中添加v-cloak指令
这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
通过样式隐藏内容，然后在内存中进行值的替换，替换好后再显示最终结果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    [v-cloak] {
        display: none;
    }
</style>

<body>
    <div id="app">
        <h1 v-cloak>{{message}}</h1>
    </div>
    <script src='./js/vue.js'></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'hello world'
            }
        })
    </script>
</body>

</html>