vue中v-cloak最详讲解

一、在vue中，渲染普通文本有2种方式：{{}}与v-text，如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-s...

Syleapn

5440人浏览 · 2019-04-14 15:49:44

Syleapn · 2019-04-14 15:49:44 发布

一、在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也会覆盖掉元素中原本的内容。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^