vue中v-cloak最详讲解

最新推荐文章于 2024-07-31 17:53:33 发布

Syleapn

最新推荐文章于 2024-07-31 17:53:33 发布

阅读量5.4k

点赞数 6

分类专栏： Vue 文章标签： v-cloak v-text v-html 闪烁

本文链接：https://blog.csdn.net/syleapn/article/details/89296595

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、在vue中，渲染普通文本有2种方式：{{}}与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">{{msg}}</div>

改成如下也ok：

   <div id="app" v-text="msg"></div>

最后输出的结果为：欢迎Vue!

但是，需要注意的是，在使用{{}}展示或更新页面数据时：当网速比较慢时，会出现一个不好的过度现象，会让用户先看到我们的表达式（上面页面中的{{msg}}），然后才看到data中的值（欢迎Vue!）------->即所谓的闪烁问题！

二、解决这个问题的方法：

1、使用v-cloak指令，然后为其设置css样式display:none;即上述代码可修改为：

<!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>
<style>
        [v-cloak]{
            display: none;
        }
</style>
</head>

<body>
   
    <div id="app" v-cloak>{{msg}}</div>

    <script>
            new Vue({
                el: '#app',
                data: {
                    msg: '欢迎Vue!'
                }
            })
        </script>
</body>

</html>

说明：但有时添加完毕后变量仍会显示（即闪烁问题没解决），这是怎么回事呢？原来是 v-cloak 的display属性被优先级别高的样式覆盖所导致，所以最好再添加一个 !important ，将其优先级设置为最高，防止被其他优先级高的dispaly:none样式所覆盖。

即：

  [v-cloak]{
            display: none !important;
        }

2、使用v-text解决

三、附加：

1、{{}}与v-text的区别

1》默认v-text是没有闪烁问题，{{}}存在闪烁的问题

2》 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>
<style>
        [v-cloak]{
            display: none;
        }
</style>
</head>

<body>
   
    <div id="app" v-cloak>￥{{msg}}元</div>

    <script>
            new Vue({
                el: '#app',
                data: {
                    msg: '100'
                }
            })
        </script>
</body>
</html>

最后输出的结果为：￥100元

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" v-text="msg">￥元</div>

    <script>
            new Vue({
                el: '#app',
                data: {
                    msg: '100'
                }
            })
        </script>
</body>
</html>

最后输出的结果为：100

2、{{}}、v-text与v-html的区别

1》前两个向页面渲染普通文本，后者向页面输出html。

2》与v-text一样，v-html也会覆盖掉元素中原本的内容。