《vue中对象数组动态添加属性》

前言：

        在软件开发中，前端为了实现某些效果，需要给后端返回的数据中动态添加属性，本文中就来具体阐释下如何给对象数组动态添加属性的问题

正文：

        需求：

        布局如上图所示，基本需求为：每张银行卡有自己的名字、logo、银行卡号、背景色，前后端的交互数据结构为：

bankCardList: [
        {
          key: 'gongshang',
          backName: '中国工商银行',
          backCard: '****1205',
        },
        {
          key: 'jiaotong',
          backName: '交通银行',
          backCard: '****1206',
        },
        {
          key: 'nongye',
          backName: '农业银行',
          backCard: '****1207',
        },
        {
          key: 'guangda',
          backName: '广大银行',
          backCard: '****1208',
        },
 ],

        其中数据结构中缺少了背景色和logo，此时就需要交互成功之后，前端给返回的数组中，动态添加属性：背景色和logo地址，接下来需要两步可实现：

        第一，分别定义两个数组：背景色和logo地址

backColorList: [
        {
          key: 'gongshang',
          color: '#ff4d4f',
        },
        {
          key: 'jiaotong',
          color: '#40a9ff',
        },
        {
          key: 'nongye',
          color: '#13c2c2',
        },
        {
          key: 'guangda',
          color: '#faad14',
        },
      ],
logoList: [
        {
          key: 'gongshang',
          url: require('../../static/gongshang.jpeg'),
        },
        {
          key: 'jiaotong',
          url: require('../../static/jiaotong.jpeg'),
        },
        {
          key: 'nongye',
          url: require('../../static/nongye.jpeg'),
        },
        {
          key: 'guangda',
          url: require('../../static/guangda.jpeg'),
        },
      ]

        在页面的初始化加载的钩子函数中执行：

  created () {
    this.bankCardList = this.bankCardList.map((item) => {
      let backColor = this.backColorList.find(x => x.key === item.key).color
      let logoURL = this.logoList.find(x => x.key === item.key).url
      return Object.assign(item, { backColor: backColor, logoURL: logoURL })
    })
  },

        其中页面布局采用了less语言，运用flex布局完成了页面的样式开发，通过&引用父级名称，增加可读性

.main {
  &-display {
    display: flex;
    flex-direction: column;
    align-items:center;
    .van-card{
      background-color: #fff;
      border-radius: 5px;
      width: 90%;
      height: 4rem;
    }
    &-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      &-backName {
        display: flex;
        justify-content: flex-start;
        padding: 0.5rem;
        span {
          display: flex;
          align-items: center;
          padding: 0 0 0 0.5rem;
        }
      }
    }
  }
}

       如此一来，整个需求就完成了，在布局的实现上，代码经过了雕琢，融入了更多的逻辑性思考，进阶中✌️

结语：

       just do it