1.19 业务需求

说来叶简单，就是把文字变成相应的颜色
先来看代码

数据部分

// 显示院校状态逻辑
  showSchoolStatus(value) {
    const status = {
      0: '待学生确认',
      10: '处理中',
      15: '已提交',
      20: '已驳回',
      25: '学生驳回',
      30: '已确认',
      [-10]: '已弃用',
    };

    return status[value] || '';
  }

逻辑部分

  <td>{{ vm.showSchoolStatus(item.status) }}</td>

需求是把 已驳回 和 学生驳回变成红色
已确认 变成绿色

实现过程

将原数据添加color属性

// 显示院校状态逻辑
  showSchoolStatus(value) {
    const status = {
      0: {
       txt:'待学生确认'
      },
      10: {
       txt: '处理中'
      },
      15: {
        txt: '已提交'
      },
      20: {
        txt:'已驳回',
        color:'red'
      },
      25: {
        txt:'学生驳回',
        color:'red'
      },
      30: {
        txt: '已确认',
        color: 'green'
      },
      [-10]: {
        txt: '已弃用'
      },
    };
    return status[value] || '';
  }

逻辑部分

<td style="color: {{vm.showSchoolStatus(item.status).color}} ">{{ vm.showSchoolStatus(item.status).txt}}</td>

总结：

1. 属性：值形势的数据，要想添加属性： 值 采用对象的形势
2. 原来的返回数据的写法不变，应为之前返回的单个的数据，现在返回的是一个对象，都是返回单个
3. 获取数据的时候，这里我有点眼界小，只是在item.status里面获取数据，首先，你都不知道item.status是什么数据，就txt? 应该现将item.status打印出来，发现是对象的名，那取值的话，肯定是在对象外面取值，再说了 … 少见
4. 样式的修改 最常见的就是style=“color:red”
   5.那现在就是style = “ color: {{vm.showSchoolStatus(item.status).color}}”