應(yīng)用1：隱藏空元素
有時空元素會影響頁面布局，通過:empty可以很方便地將它們隱藏颁督。
<template>
<ol>
<li>一</li>
<li></li>
<li>三</li>
</ol>
</template>
<style scoped>
li:empty {
display: none;
}
</style>
image.png
注意事項：若是v-for循環(huán)践啄，很多格式化插件在內(nèi)容為空時，默認也會生成空格沉御，則無法匹配: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：缺失字段智能提示
利用另一個偽類樣式::before增加一個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
