vuejs对“暂无数据”提示的闪现怎么处理？

Question

想使用vue从接口中获取数据，渲染出一个列表，列表如果没有数据的话，需要提示为“暂无数据”，代码如下图

问题来了，vue在从接口里获取到真实数据前，是从data的初始数据来渲染的，所以会优先显示暂无数据，等从接口里获取到真实数据后，再重新渲染出列表，如果获取的真实数据为空，就显示“暂无数据”。

但每次执行vue的时候，都会先出现暂无数据，然后再渲染出真实数据。这个用户体验比较差吧，轻微强迫症的人都忍受不了。

求大神解惑，跪谢~~

Answer 1

将暂无数据的 v-if 设为一个变量 变量初始值设为 false,在调用接口数据返回后判断 ==0 将该变量置为 true

Answer 2

// 组件
data(){
    return {
        data:null // 设置默认值为null
    }
}

// template
<div v-show="data != null">
    <div v-if="data.length>0">
    </div>
    <div v-else> 暂无数据 </div>
</div>

另外，需要注意后端没有数据的时候的返回，如果后端在没有数据的时候返回 null,你前端需要简单处理下
this.data = api.data || []

注意上面是伪代码，api.data 标示服务的返回

Answer 3

data:{
    show:false
},
axios({}).then(()=>{
    this.show = true;
})

Answer 4

简单的处理： 再状态在暂无数据的

<div  v-if="data.length <=0 && !firstRender">
    暂无数据的   
<duv/>


// js

axios().then(() => {
    this.firstRender && this.firstRender = false
})

Answer 5

v-loading 过渡一下