V-CLOCK

最新推荐文章于 2024-06-13 14:55:33 发布

distant-place

最新推荐文章于 2024-06-13 14:55:33 发布

阅读量65

点赞数

分类专栏： js 文章标签： html5 javascript vue.js html

本文链接：https://blog.csdn.net/wxxmthgh/article/details/133760580

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

众所周知，当网速慢的时候，vue的渲染页面会先显示插值语法的括号，然后进行闪烁，再显示插值表达的值。

当出现这种情况的时候，我们有两种处理方法。

1.直接使用 v-text ，不会出现这个闪烁现象

<!DOCTYPE html>
<html lang="en">
 
<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://unpkg.com/vue/dist/vue.js"></script>
</head>
</head>
 
<body>
   
    <div id="app">{{msg}}</div>
 
    <script>
            new Vue({
                el: '#app',
                data: {
                    msg: '欢迎Vue!'
                }
            })
        </script>
</body>
 
</html>
//直接修改成下面这样，就可以避免
 <div id="app" v-text="msg"></div>

2.使用 v-clock，可以等待插值里面的值出来之后在进行显示，不会出现闪烁现象。

<!DOCTYPE html>
<html lang="en">
 
<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://unpkg.com/vue/dist/vue.js"></script>
</head>
</head>
 <style>
        [v-cloak]{
            display: none;
        }
</style>


<body>
   
    <div id="app" v-clock>{{msg}}</div>
 
    <script>
            new Vue({
                el: '#app',
                data: {
                    msg: '欢迎Vue!'
                }
            })
        </script>
</body>
 
</html>

附加：有的设置了样式之后还是会出现这样的情况，那有可能是权限的问题，加了最高级别权限就行了！important

相比起来，更推荐第二种，使用起来更方便，展示更直观。