在我使用的许多前端框架中，都有将三元组或 if 分支注入到 html 逻辑中的选项。这是我经常使用的逻辑。一种特殊情况是在没有数据时显示。
我刚刚偶然发现了一种 css 模式，它让我的生活变得更加轻松：:only-child 伪类。
反应
在 react 中，我会做这样的“事情”…
{ data.length === 0 ? nothing to show. : }
角
在 angular 中，我会做这样的“事情”…
@if (data.length === 0) { nothing to show.} @else { }
使用css
简单来说，我有两种情况。
没有数据。有数据。
no data showing
- nothing to show. <!--
- data here -->
data showing
- nothing to show.
- data here
使用简单的 css 类 .single …
.handle-no-data:not(:only-child) { display: none;}.handle-no-data:only-child { display: flex;}
这个 css 可以简化为 …
.handle-no-data { &:not(:only-child) { display: none; } &:only-child { display: flex; }}
这是上面代码的结果…
立即学习“前端免费学习笔记（深入）”；
概括
如您所见，我必须将数据处理移至表级别，但 css 非常直接地处理“无数据”场景。
这太令人兴奋了！
以上就是CSS&# 独生子而不是条件逻辑的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1630856.html
微信扫一扫 
支付宝扫一扫 
