vue.js里面 axios去后台获取数据（异步），但是页面开始渲染了{{info.name}}

Question

    <div id="student-info" class="header-info clear-both">
        <div class="header-box clear-both">
            <!-- 头像 -->
            <a class="img_href" href="#">
                <img class="my-head" v-bind:src="imgUrl" />
            </a>
            <!-- 个人信息 -->
            <div class="my-info clear-both">
                <div class="top-info clear-both">
                    <span class="nickname" v-if="name">{{name}}</span>
                    <span id="student_age" class="age">{{age}}</span>
                    <span class="gender">
                        <img class="gender_img" v-if="gender == '1'" src="/Public/images/icons/gender_male.png" />
                        <img class="gender_img" v-if="gender == '2'" src="/Public/images/icons/gender_male.png" />
                    </span>
                    
                </div>
                <div class="user-id-info text-line-height clear-both">
                    ID: S{{identifier}}
                </div>
                <div class="user-status text-line-height clear-both">
                    <i class="fa fa-envelope"></i>
                    <span class="user-tips-text">{{statusText}}</span>
                </div>
                <div class="user_address text-line-height clear-both">
                    <i class="fa fa-map-marker"></i>
                    <span class="user-tips-text">{{address}}</span>
                </div>
                
            </div>
            <!-- 设置 -->
            <div class="settings">
                <img src="/Public/img/icons/settings.png" />
                <span>SETTINGS</span>
            </div>
        </div>
    </div>

studentInfo:function(){
            var student_Info = new Vue({
                el:"#student-info",
                data:{
                    name:"",
                    gender:"",
                    identifier:"",
                    dob:"",
                    age:"",
                    status:"",
                    statusText:"",
                    address:"",
                    imgUrl:"",
                },
                
                methods:{
                    getStudentInfo:function(){
                        var oIdentifier = getCookie('identifier');
                        var params = new URLSearchParams();
                        params.append('identifier',oIdentifier);
                        axios.post('/Student/student_base_info',params).then(response => {
                            //console.log(response.data);
                               this.name = response.data.name;
                               this.identifier = response.data.identifier;
                               this.age = myAge(response.data.dob);
                               this.gender = response.data.gender;
                               this.status = response.data.status;
                               this.statusText = courseStatus(this.status);
                               this.imgUrl = "/Upload/avatar/100_100/"+response.data.openid+".jpg"
                        });
                   },
                },
                created(){
                    this.getStudentInfo();
                },
            });
        },

当axios 去后台取数据的时候，页面会先渲染这个东西
等 date返回的时候才正常替换(第二遍渲染)！

请问大佬们是怎么解决的这个问题

布局乱了不说，给人感觉加载两次不是很爽啊
（不要说改成同步的 ~微笑~）

Answer 1

去看下 v-clock 应该能帮助你

Answer 2

1，为何会二次渲染
直接引入vue.js才会有这种问题。
浏览器拿到的.html文件里, 代码包含{{}}, 浏览器肯定会先渲染为{{}}。
vue.js执行时会遍历DOM里, 把{{}}及v-指令找出来, 进行双向绑定。
在执行你写的异步代码时, 请求后会通过vue.js将DOM里的{{}}及里面的内容进行替换, 再次渲染。

2, 如何解决
在你这种情况下, 二次渲染不可避免。你能做的就是让第一次渲染对用户不可见。
思路就是, 第一次渲染时, 设置元素display: none; 第二次渲染时, 设置元素display: visible。
vue.js提供了v-cloak指令。该指令的作用是, 在vue.js首次为{{}}赋值时, 将其display设置为visible。

结论：
1, <div id="student-info" class="header-info clear-both" v-cloak>
2, 在你的css中添加[v-cloak] { display: none; }

Answer 3

绑定了数据的地方使用v-if
比如

<span v-if="this.statusText">{{this.statusText}}</span >