我正在向卡片添加功能區，我想根據道具動態顯示內容和顏色。我成功地attr()為內容做到了，但似乎我不得不更新背景顏色，我該怎么做？
HTML：
<span class="ribbon zindex-2" :data-content="content" />
SCSS:
.ribbon {
position: absolute;
width: 100px;
height: 100px;
top: 0px;
left: 15px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.ribbon::before {
content: attr(data-content);
position: absolute;
width: 150%;
height: 28px;
background: red; /* value to update dynamically but I don't know how */
transform: rotate(-45deg) translateY(-20px);
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
font-weight: 600;
color: #fff;
letter-spacing: 0.1em;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
內容變數來自 Vue Prop。例如，如果內容變數為“1”，我想將此背景設定為金色，如果為“2”，則設定為灰色等等......
謝謝
uj5u.com熱心網友回復：
您可以在 css 中使用屬性選擇器：
.ribbon[data-content="1"]::before {
background: gold;
}
.ribbon[data-content="2"]::before {
background: gray;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/369754.html
標籤：javascript html css