應(yīng)用1：隱藏空元素

有時(shí)空元素會影響頁面布局，通過:empty可以很方便地將它們隱藏。

<template>
  <ol>
    <li>一</li>
    <li></li>
    <li>三</li>
  </ol>
</template>

<style scoped>
li:empty {
  display: none;
}
</style>

image.png

注意事項(xiàng)：若是v-for循環(huán)，很多格式化插件在內(nèi)容為空時(shí)，默認(rèn)也會生成空格，則無法匹配: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>

應(yīng)用2：缺失字段智能提示

利用另一個(gè)偽類樣式::before增加一個(gè)content提示

<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>

image.png