3. Vue 使用 v-cloak 解决由于网络延迟导致的数据渲染显示问题那么如何解决这个问题呢？可以使用v-cloak

问题

当Vue.js库通过网络引入较慢的时候，渲染的数据就会显示如下：

那么如何解决这个问题呢？可以使用v-cloak来处理。

存在问题的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
    <div id="app">
        <p>{{ msg }}</p>
    </div>

    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>

    <script>
        // 2. 创建一个Vue的实例
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello world,Vue!'
            }
        })
    </script>

</body>
</html>

使用v-cloak解决网络延迟的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*设置v-cloak的属性样式*/
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
    <div id="app">
        <p v-cloak>{{ msg }}</p>
    </div>

    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>

    <script>
        // 2. 创建一个Vue的实例
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello world,Vue!'
            }
        })
    </script>

</body>
</html>

当设置了v-cloak属性，网络延迟没有加载到的时候，则可以根据样式隐藏起来。

v-cloak在网络加载好vue.js之后，属性就会自动去除，那么相应设置的样式也就消失了。