应用1:隐藏空元素
有时空元素会影响页面布局,通过:empty可以很方便地将它们隐藏。
<template> <ol> <li>一</li> <li></li> <li>三</li> </ol> </template> <style scoped> li:empty { display: none; } </style>
注意事项:若是v-for循环,很多格式化插件在内容为空时,默认也会生成空格,则无法匹配:empty,解决方案是多加一层div
<template> <div class="bigBox"> <div class="smallBox">1</div> <div class="smallBox">2</div> <div class="smallBox"></div> <div class="smallBox">4</div> </div> </template> <style scoped> .smallBox { height: 60px; width: 100px; background: red; color: white; text-align: center; line-height: 60px; } .smallBox:empty { display: none; } .bigBox { margin: 30px; width: 60%; display: flex; justify-content: space-around; } </style>
应用2:缺失字段智能提示
<template> <div class="bigBox"> <div class="smallBox" v-for="(item, index) in list" :key="index"> <span class="content">{{ item }}</span> </div> </div> </template> <script> export default { data() { return { list: [1, 2, , 4], }; }, }; </script> <style scoped> .bigBox { width: 60%; margin: 20px; display: flex; justify-content: space-around; } .smallBox { height: 60px; width: 100px; background: red; color: white; text-align: center; line-height: 60px; } .content:empty::before { content: "暂无编号"; } </style>
<template> <table border> <tr> <td>1</td> <td></td> <td>3</td> </tr> </table> </template> <style scoped> td { min-width: 100px; text-align: center; } td:empty::before { content: "暂无数据"; } </style>
类似的常用场景有:
.searchResult:empty::before { content: '没找到相关内容'; display: block; line-height: 300px; text-align: center; color: gray; }
.articleList:empty::before { content: '还没有发表任何文章'; display: block; line-height: 300px; text-align: center; color: gray; }
全局空元素样式的css
.empty:empty::before { content: '暂无数据'; display: block; line-height: 300px; text-align: center; color: gray; }