根据所给的数组,实现以下的界面效果。
要求:根据不同的文字显示不同的状态颜色。(使用过滤器)__
list: [
{
time:"2019-11-20",
status:"待审核"
},
{
time:"2018-11-20",
status:"审核通过"
},
{
time:"2022-03-20",
status:"未通过"
}
]
<table>
<tr>
<td>订单日期</td>
<td>状态</td>
</tr>
<tr v-for="item in list">
<td>{{item.time}}</td>
<td>{{item.status}}</td>
</tr>
</table>
不知道的,还以为是来布置作业的
就是表格 渲染 。根据 status 给 一个 :style=”color" 属性
<table border="1">
<tr>
<td>订单日期</td>
<td>状态</td>
</tr>
<tr v-for="item in list">
<td>{{item.time}}</td>
<td
:style="item.status | vv"
>{{item.status }}</td>
</tr>
</table>
data() {
return {
list:[
{
time: "2019-11-20",
status: "待审核"
},
{
time: "2018-11-20",
status: "审核通过"
},
{
time: "2022-03-20",
status: "未通过"
}
]
}
},
filters: {
vv(value){
console.log(value,"999")
if(value=="待审核"){
return "color:blue";
}else if(value=="审核通过"){
return "color:green";
}else{
return "color:red";
}
}
}
list数组中每个元素里面可以设置个属性color:'red',属性值是对应的颜色值