Vue 闪现解决

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

问题代码

<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>

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