平时开发的时候数据都是通过请求接口获取的，也会存在接口没有数据的情况。这个时候正常的做法是给用户一个提示，让用户知道当前不是出 bug 了，而是确实没有数据。
一般的做法是我们人为的判断当前数据返回列表的长度是否为 0，如果为 0 则显示一个 “暂无数据” 给用户，反之则隐藏该提示。写过 Vue 的小伙伴是不是经常这么做：
<div>
<template v-if="datas.length">
<div v-for="data in datas"></div>
</template>
<template v-else>
<div>暂无数据</div>
</template>
</div>
但是有了 :empty 这个选择器后，你大可以把这个活交给 CSS 来干。
.container {
height: 400px;
width: 600px;
background-color: antiquewhite;
display: flex;
justify-content: center;
align-items: center;
}
.container:empty::after {
content: "暂无数据";
}
通过 :empty 选中内容为空的容器，然后通过伪元素为空容器添加提示。
.data:empty {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #666;
font-size: 14px;
}
.data:empty::before {
content: '';
display: block;
margin-bottom: 8px;
background-image: url('@/static/nodata.png');
background-size: contain;
background-repeat: no-repeat;
width: 250px;
height: 250px;
}
.data:empty::after {
content: '暂无数据';
}