页面暂无数据显示--》:empty 选择器和css gap属性应用

最新推荐文章于 2024-06-21 16:19:00 发布

weixin_44134816

最新推荐文章于 2024-06-21 16:19:00 发布

阅读量367

点赞数

分类专栏：前端文章标签： css 前端 css3

本文链接：https://blog.csdn.net/weixin_44134816/article/details/128419663

版权

前端专栏收录该内容

80 篇文章 2 订阅

订阅专栏

1.大部分人在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: "暂无数据";
}

----
 gap属性:它适用于 Grid 布局、Flex 布局以及多列布局，并不一定只是 Grid 布局中可以使用。
.className { //每个元素之间隔开 20px
 display: flex | grid；
 gap: 20px;
 }