Vue 闪现解决

孙瑞宇

于 2019-03-19 17:25:00 发布

阅读量245

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/zenan/p/10560026.html

博客介绍了页面加载数据时原始代码闪现的场景，给出问题代码，并提供解决办法，即加入css代码并在view中引用，以此在数据未加载完成前隐藏原始代码。

场景介绍：页面加载数据时，原始代码{{}}闪现。

问题代码

<div class="root">
    <ul v-for="user in userProfile">
        <li>{{user.username}}</li>
        <li>{{user.email}}</li>
        <li>{{user.last_time}}</li>
    </ul>
</div>
<script>
    axios.get("http://127.0.0.1:8000/users/?format=json").then(function (response) {
                    var v = new Vue({
                        el:".root",
                        data:{
                            userProfile:response.data
                            },
                    }) ;
                });
</script>

解决：

1. 加入css代码

    <style>
        [v-cloak] {
          display: none;
        }
    </style>

2.view中引用css

<div class="root">
    <ul v-for="user in userProfile" v-cloak>  #这里
        <li>{{user.username}}</li>
        <li>{{user.email}}</li>
        <li>{{user.last_time}}</li>
    </ul>
</div>
<script>
    axios.get("http://127.0.0.1:8000/users/?format=json").then(function (response) {
                    var v = new Vue({
                        el:".root",
                        data:{
                            userProfile:response.data
                            },
                    }) ;
                });
</script>

　　达到效果，在数据为加载完成前，隐藏原始代码。

转载于:https://www.cnblogs.com/zenan/p/10560026.html