【css实用小技巧】你还在用if else来进行页面空值判断吗？

需求

我们在项目中经常会遇到接口未返回数据，这时我们需要展示一个文本（暂无数据）提示用户是真的没有数据，而不是系统出了问题。

解决方法

1、常规方法-使用if判断

<div class="list">
    <template v-if="data.length">
        <div class="item" v-for="item in data">{{item}}</div>
    </template>
    <div v-else>暂无数据</div>
</div>

2、使用:empty

:empty选择器匹配没有子元素（包括文本节点）的每个元素。

<template>
    <div class="list">
        <div class="item" v-for="item in data">{{item}}</div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            data: [],
        };
    }
};
</script>

<style>
.list {
    width: 600px;
    height: 200px;
    background-color: pink;

    display: flex;
    justify-content: center;
    align-items: center;
}

.list:empty:after{
    content: "暂无数据";
    color: #fff;
}
</style>

效果图如下：

我们发现使用CSS属性:empty就可以解决这个问题了，代码结构也很简洁。浏览器兼容性也不错，适合普遍使用在我们的项目中。