往期链接：
「CSS之选择器」
「CSS之选择器（二）」
「CSS之选择器（三）」
「CSS之选择器（四）」
「CSS之选择器（五）」
「CSS之选择器（六）::before和::after」
前言
回想一下，在我们如果要渲染一组数据的时候，往往需要通过 v-for 来循环遍历我们的数据源，拿到数据的每一项进行相应的操作。
我们还回判断数据源里面里面是否有数据，如果没有的话，我们可能会有一个图片加文字的形式提示数据内容为空。
然而，如上说的这些是要通过 js 或者 vue 的指令来实现，我们今天就来说通过 CSS 来如果实现它。有请我们今天的 CSS 选择器 :empty.
:empty
:empty 作用于无子节点的节点，如下三种情况不会触发：empty
只存在节点：<div><p>我是数据</p></div>
只存在文本：<div>我是数据</div>
同时存在节点和文本：<div>我是 <p>数据</p></div>
实现
接下来，让我们实现一下如上图的效果。
<div> <ul class="emptyList"> <li v-for="v in 20" :key="v">我是数据 {{v}}</li> </ul> <ul class="emptyList"> <li v-for="v in 0" :key="v">我是数据 {{v}}</li> </ul></div>
复制代码
$empty: "https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/42d1cdf36f0b4f9eb86be1b93faa36a9~tplv-k3u1fbpfcp-zoom-1.image";.emptyList { width: 400px; height: 350px; overflow: auto; outline: 1px solid pink; &:empty { display: flex; justify-content: center; align-items: center; background: url($empty) no-repeat center/400px auto; &::after { margin-top: 190px; font-weight: bold; content: "nothing"; } } & + .emptyList { margin-left: 20px; } li { padding: 0 10px; height: 40px; background-color: black; line-height: 40px; color: white; &:nth-child(even) { color: black; background-color: white; } }}
复制代码
如上，就实现完成了。
好，今天就到这里了，今天努力的你依然是最棒的。加油，加油，你最棒！加油，加油，你最强！哦豁，Bye Bye！！！
评论