vue更新data中的数据页面不渲染_如何控制vue.js不渲染data中的初始值？

按照国际惯例，我首先 new 了一个 Vue 实例

let vm = new Vue({

data: {

name: 'xxx'

},

methods: {

getData(){

let that = this;

$.ajax({

...,

success: function(res){

that.name = res;

}

});

}

},

mounted(){

this.getData();

}

});

如上，在 data 中定义了一个变量 name, 将获取数据的函数挂载在 mounted 中，用异步返回的值去变更 name。 ok，现在将 name渲染在页面上：

{{ name }}

现在的问题是，页面上会快速显示 name 的初始值 'xxx'，随后才更新为异步获得的数据，很影响体验

有没有方法可以不渲染初始值？(只展示异步获得的数据)

补充：设置初始值为空依然会渲染在页面上，撑开父元素

比如，渲染结构如下：

({{ name }})

解决方案：

你可以把初始值复制为空字符串'',然后用v-if或者v-show根据name是否为空来判断是否需要渲染{{ name }}就可以了。要是觉得突然出现的有点突兀，可以加过渡。