vue中将后台返回的数字转换成对应的文字，通过动态绑定类名修改文字颜色

前言：项目中有展示订单状态这样一个需求，后端数据返我的是数字，但前端展示的是文字‘已购买’，‘退卡中’，‘未购买’；后端要求是数字为10表示‘已购买’颜色为绿，11或者12代表‘退卡中’颜色为橙，null代表‘未购买’颜色为红；基于这个需求，来记录一下这里用到了vue的动态绑定类名思路：先在样式里定义好用到的几个颜色vue的动态绑定类名，如果item.earn_profit_type == '10

铁锤妹妹@

3316人浏览 · 2021-03-18 16:05:10

铁锤妹妹@ · 2021-03-18 16:05:10 发布

前言：

项目中有展示订单状态这样一个需求，后端数据返我的是数字，但前端展示的是文字‘已购买’，‘退卡中’，‘未购买’；后端要求是数字为10表示‘已购买’颜色为绿，11或者12代表‘退卡中’颜色为橙，null代表‘未购买’颜色为红；基于这个需求，来记录一下
在这里插入图片描述
这里用到了vue的动态绑定类名

思路：

先在样式里定义好用到的几个颜色
vue的动态绑定类名，如果item.earn_profit_type == '10'为true，class类名就是green，如果item.earn_profit_type == '11'或者 item.earn_profit_type == '12'为true，class类名就是yellow，以此类推
根据接口数字改成相应易懂的文字，调用filterStatus()方法，需要传一个值，也就是获取接口返回的数字

解决过程：

CSS样式

.green {
  color: #39b54a;
}
.yellow {
  color: #f29124;
}
.red {
  color: #e6432d;
}

html
这里取得代码其实是vue for循环里面的一部分


<div class="register">
              <span>订单状态</span>
              <p
                class="withdrawal_num"
                :class="{
                  green: item.earn_profit_type == '10',
                  yellow:
                    item.earn_profit_type == '11' ||
                    item.earn_profit_type == '12',
                  red: item.earn_profit_type === null
                }"
              >
                {{ filterStatus(item.earn_profit_type) }}
              </p>
            </div>

filterStatus(val) {
      if (val == "10") {
        return "已购买";
      } else if (val == "11" || val == "12") {
        return "退卡中";
      } else {
        return "未购买";
      }
    }