解决vue插值表达式加载页面闪烁

ゞ浴缸里的玫瑰 2023-07-13 10:55 12阅读 0赞

**场景:**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDA5MjYw_size_16_color_FFFFFF_t_70][]

使用浏览器自带的功能模拟在特定条件下出现插值表达式闪烁的问题。较小的模块我们可以忽略此问题，如果模块较大就会大大影响我们的体验。

**原因:**

对于dom的操作还是由JavaScript去操作，在vue中，我们会等待dom元素加载完毕然后我们才会去渲染模板。

**解决:**

v-cloak

官方文档解释：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 `[v-cloak] { display: none }` 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

也就是说使用此命令配合css属性可以让元素在编译未完成之前一直都处于隐藏的状态。

<html>
    <head>
        <style>
            [v-cloak]{
                display: none;
            }
        </style>
    </head>
    
    <body>
        <div id="app">
            
            <p v-cloak> ====={
       { msg }}-------</p>
        </div>
    </body>
    <script src="../js/vue.js"></script>
    <script>
     var app = new Vue({
         el:"#app",
         data:{
             msg:"hello vue",
            
         }
     })
    </script>
    </html>

亲测有效!

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDA5MjYw_size_16_color_FFFFFF_t_70]: /images/20230529/1d339381b9294622bd7ed1c6c0a755d7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue.js中的插值(插值表达式)和使用JavaScript表达式

下面demo中使用 \{ \{\}\} 的形式在 html 中获取实例对象对象中 data 的属性值；这种使用 \{ \{\}\} 获取值得方式，叫做插值或插值表达式

迈不过友情╰/ 2024年03月22日 16:00/ 0 赞/ 82 阅读

相关 Vue模板-插值表达式详解

聚沙成塔·每天进步一点点本文内容 ⭐ 专栏简介基本用法表达式与操作插值表达式中的方法调用注意事项

比眉伴天荒/ 2024年02月05日 22:56/ 0 赞/ 12 阅读

相关解决vue插值表达式加载页面闪烁

场景: ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

ゞ浴缸里的玫瑰/ 2023年07月13日 10:55/ 0 赞/ 13 阅读

相关【Vue】—解决页面图片加载抖动的问题

【Vue】—解决页面图片加载抖动的问题问题如下 ![请添加图片描述][721b328bbea546c28105d965c4539e54.gif] 解决办法

小灰灰/ 2022年08月28日 15:57/ 0 赞/ 332 阅读

相关 Picasso图片加载闪烁问题解决方案

在android中我们使用了Picasso作为图片加载库，但有时候我们在来回切换fragment的时候会发现存在闪烁的问题，例如某app主界面有3个模块，分别是首页，资讯，我的

我会带着你远行/ 2022年06月15日 07:29/ 0 赞/ 264 阅读

相关避免vue表达式在加载时的闪烁

在vuejs指令中有 `v-cloak` ，这个指令保持在元素上直到关联实力结束编译。和CSS规则如 `[v-cloak]{display:none}` 一起用时，这个指令可以

冷不防/ 2022年06月15日 04:22/ 0 赞/ 134 阅读

相关 angularJs插值表达式闪烁问题处理

<head> <style type="text/css"> [ng-cloak],.ng-cloak{display:none;} }

约定不等于承诺〃/ 2022年04月18日 01:20/ 0 赞/ 160 阅读

相关 vue -- v-cloak解决刷新或者加载出现闪烁（显示变量）

在使用vue绑定数据的时候，渲染页面时会出现变量闪烁，例如 <div class="app"> <p>{ {value.n

女爷i/ 2022年04月10日 05:13/ 0 赞/ 158 阅读

相关 vue页面渲染是闪烁{{}}

因为vue需要对页面进行解析，所以在完成之前，会看到\{ \{\}\}之类的代码。解决方法：v-cloak。在声明的对象上加上v-cloak <div id="

叁歲伎倆/ 2021年09月27日 05:52/ 0 赞/ 406 阅读

相关 Vue.js--插值与表达式

使用双大括号(Mustache语法) "\{ \{\}\}"是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来，例如： <div id="myApp">

Bertha 。/ 2021年08月13日 12:57/ 0 赞/ 391 阅读