<!-- 1是待完成 2延迟 3已完成-->
三元表达式来操作
和后端协商定义的字段status:3来展示已完成
{
"project":"快易订",
"name": "陈敏",
"taskname":"小程序方案设计",
"performname": "夏寒北",
"startin": "9月18",
"starttime": "9:00",
"endin": "9月19",
"endtime": "20:00",
"status":"3",
"create":"9月18",
"createtime":"8:00"
}
html
<view class="public-box" style="margin-right: 20rpx;">{{detailList.taskname}}</view>
<!-- 1是待完成 2延迟 3已完成-->
<view class="public-box" :class="{
color1:detailList.status==1,
color2:detailList.status==2,
color3:detailList.status==3,
}">{{detailList.status==1?'待完成':(detailList.status==2?'延迟':'已完成')}}</view>
css
.color1 {
color: aqua;
}
.color2 {
color: bisque;
}
.color3 {
color: orange;
}