如何控制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渲染在页面上:
<span>{{ name }}</span>
现在的问题是,页面上会快速显示 name 的初始值 'xxx',随后才更新为异步获得的数据,很影响体验 有没有方法可以不渲染初始值?(只展示异步获得的数据)
补充:设置初始值为空依然会渲染在页面上,撑开父元素 比如,渲染结构如下:
<span>({{ name }})</span>
解决方案:
你可以把初始值复制为空字符串'',然后用v-if
或者v-show
根据name
是否为空来判断是否需要渲染<span>{{ name }}</span>
就可以了。要是觉得突然出现的有点突兀,可以加过渡。