根据所给的数组,实现以下的界面效果。 要求:根据不同的文字显示不同的状态颜色。

根据所给的数组,实现以下的界面效果。

要求:根据不同的文字显示不同的状态颜色。(使用过滤器)__
list: [

                {

                    time:"2019-11-20",

                    status:"待审核"

                },

                {

                    time:"2018-11-20",

                    status:"审核通过"

                },



                {

                    time:"2022-03-20",

                    status:"未通过"

                }

            ]

img


<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";
        }
     }
  }

img


https://codepen.io/guyu521/pen/gOzGMjp

list数组中每个元素里面可以设置个属性color:'red',属性值是对应的颜色值