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

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

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

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

求大神解惑,跪谢~~

回答:

// 组件
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 标示服务的返回

回答:

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

回答:

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

回答:

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

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


// js

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

回答:

v-loading 过渡一下

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注