1。根據不同狀態顯示不同的背景色
<div class="status">
<span class="mark" :class="markClassMap[baseInfo.status] || ''">
{{baseInfo.status}}
</span>
</div>
markClassMap: {
'待處理': 'mark-yellow',
'處理中': 'mark-blue',
'處理完成': 'mark-green',
'駁回': 'mark-red',
'已廢棄': 'mark-deep-red'
},
.status { .mark{
相關樣式 }
.mark-yellow {
background: #FCAC6F;
}
.mark-blue {
background: #6F9FFF;
}
.mark-green {
background: #1AE0BA;
}
.mark-red {
background: #F34158;
}
.mark-deep-red {
background: #DF5164;
}
}
效果
2、H5點擊電話,撥打電話
<a :href="'tel:' + standardInfo.contactNumber">{{standardInfo.contactHideNumber}}</a>
// 隱藏電話中間4位
contactHideNumber: val.contactNumber.substring(0, 3) + '****' + val.contactNumber.substring(7)
效果