根据接口数据返回的不同字段显示不同背景颜色

结构：
<div v-for="(item, index) in park" :key="index">
<span :class="toHldj(item)">{{ item.hldj.substr(0, 2)}}</span>
//substr(0,2)要抽取的子串的起始下标。从0开始截取2位，如南一公园只会显示南一
</div>

交互：
 methods: {
    toHldj(item) {
      if (item.hldj == "南一公园") {
        return "a1";
      }
      if (item.hldj == "南二公园") {
        return "a2";
      }
      if (item.hldj == "南三公园") {
        return "a3";
      }
      if (item.hldj == "南四公园") {
        return "a4";
      }
      if (item.hldj == "南五公园") {
        return "a5";
      }
    },
  },

样式：
     .a1 {
          background-color: pink;
        }

        .a2 {
          background-color: blue;
        }

        .a3 {
          background-color: red;
        }

        .a4 {
          background-color: black;
          color: black;
        }
        .a5 {
          background-color: purple;
        }

标签：返回,return,hldj,color,不同,公园,接口,item,background
来源： https://blog.csdn.net/xx820702/article/details/123608607