如果一个页面没有数据和有数据会显示不同内容，前端怎么做呢？

Question

问题一：
比如是一个订单页面，我没有订单的时候显示一个图片引导用户去挑心仪的商品，用户下单付钱后这里才有内容。

我是在用vue写页面，所以我做虚拟的json数据然后测试下有数据和没数据能不能正常显示出我想要的页面。

这样做对吗，还是应该怎么样？

问题二：
比如是一个登录和退出登录，这个又怎么考虑呢？

是自己自学的，这些交互比较多的地方怎么样去实现还是很困扰我，求指点。。。

Answer 1

拿到数据data后，判断下，

if (data.length) {
    // 这里使用数据
}

html里也是判断

<div v-if="data.length">展示数据</div>
<div v-else>提示图片信息</div>

Answer 2

1. 比如订单列表是list，直接通过v-if(list.length)进行判定即可

2. 登录：用户输入账号密码传到后端－后端验证通过后返回token－前端存在本地，每次请求的时候带上token即可；退出：后端返回退出成功后，前端清除本地存储的token，并返回到登录页