1。根据不同状态显示不同的背景色
<div class="status">
<span class="mark" :class="markClassMap[baseInfo.status] || ''">
{{baseInfo.status}}
</span>
</div>
data() {
return{
baseInfo:{
status: '待处理'
}
}
}
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)
效果