3. Vue 使用 v-cloak 解决由于网络延迟导致的数据渲染显示问题

Devops海洋的渔夫

发布于 2020-02-25 16:33:29

1.6K0

发布于 2020-02-25 16:33:29

文章被收录于专栏：Devops专栏Devops专栏

问题

当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属性，网络延迟没有加载到的时候，则可以根据样式隐藏起来。