如何用:has选择器实现数据和暂无数据的切换
在开发过程中，我们如果需要展示列表形式的数据时，通常需要在没有数据项的时候显示【暂无数据】的文字提示。
在之前通常会用v-show来切换显示，但是写起来还需要判断，很是麻烦。
所以，有没有通用解决方案呢？
有的，我们可以通过:has选择器只通过css来实现该功能。
关于:has选择器其他文章介绍的也很多，主要就是判断父级元素里面存不存在某个元素,当然也可以用来判断兄弟节点是否存在。
所以说到这里，方案已经很明显了。
我们需要三个class
// 容器
.data-list {
}
// 列表项
.data-item {
}
// 暂无数据
.no-more-data {
}
// 通过:has判断当存在数据项时，.no-more-data隐藏
.data-list:has(.data-item) .no-more-data {
display: none;
}
对应到html中就是这样
<div class="data-list">
<div v-for="item in list" :key="item.id" class="data-item">
{{item.name}}
</div>
<div class="no-more-data">暂无数据</div>
</div>
至于样式，在css中设置就可以了。 关于:has选择器还有很多很实用的场景，可以作为一种新的逻辑判断方式来取代原本需要js的判断部分。
兼容性提示
兼容性的话Chrome目前需要105以上才可以使用。
根据之前的评论（现在已经删除），使用:empty会更简单的实现这个效果。当然如果结构比较复杂，还是用这种会更加灵活。
在线演示请看这里
