css 超实用的:empty —— 隐藏空元素、缺失字段智能提示

简介: css 超实用的:empty —— 隐藏空元素、缺失字段智能提示

应用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;
}
目录
相关文章
|
7天前
|
前端开发 JavaScript
如何利用 CSS3 动画实现元素的淡入淡出效果?
在上述代码中,定义了一个名为 `fade-in` 的CSS类,其初始透明度为0,并设置了淡入的过渡效果。当通过JavaScript为元素添加 `active` 类时,元素的透明度变为1,实现淡入效果;当再次点击按钮移除 `active` 类时,元素又会逐渐淡出。通过这种方式,可以根据用户的操作灵活地控制元素的淡入淡出效果。
50 3
|
24天前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
23 0
|
1月前
|
前端开发
css 块元素、行内元素、行内块元素相互转换
css 块元素、行内元素、行内块元素相互转换
95 0
|
3月前
|
前端开发 容器
最新CSS3定位元素
【8月更文挑战第28天】
29 5
|
3月前
|
前端开发
CSS - 使用 clip-path 轻松实现正六边形块状元素
如何使用CSS的`clip-path`属性来创建正六边形的块状元素。文章提供了详细的HTML和CSS代码示例,展示了如何实现六边形的布局和样式,并通过CSS动画增强了视觉效果。最终效果是一个包含文本的可交互的正六边形元素,当鼠标悬停时会改变颜色。
153 0
CSS - 使用 clip-path 轻松实现正六边形块状元素
|
3月前
|
存储 前端开发
为 HTML 元素指定 CSS 样式的方式
【8月更文挑战第24天】
73 0
|
3月前
|
前端开发
官网导航更智能:CSS动画下划线,让每一次点击都充满期待!
官网导航更智能:CSS动画下划线,让每一次点击都充满期待!
|
3月前
|
前端开发
CSS动画新潮流:炫酷水波效果,让网页元素生动起来!
CSS动画新潮流:炫酷水波效果,让网页元素生动起来!
|
4月前
|
前端开发 容器
CSS对行级元素的影响
【7月更文挑战第4天】CSS对行级元素的影响
36 2
|
4月前
|
前端开发
css的flex布局中使用margin:auto智能分配剩余空间
css的flex布局中使用margin:auto智能分配剩余空间
46 1