vue 实现动态绑定class属性

最终效果图：

需求：

当点击其中一个div时，1.背景图切换；2.绿色的小icon变成白色；3.字体变成白色

环境：

vue2

代码：

<template>
    <div style="position: relative;">
      <div style="margin-top: 14%">
        <img style="width: 100%;" :src="imgUrl" >
      </div>
      <div style="position: absolute;top:11%;right: 65%;left: 19%;width: 16.5%;">
        <div @click="imgClick(0)" :class="[{bk:active0},{organ:!active0}]">
          <img style="vertical-align: middle;margin:5% 5% 5% -20%" :src="smallImgUrl0" />
          <span align="left" class="font" :class="[{font:active0},{content:!active0}]">机构随心<br>
            <span class="color" :class="[{color:active0},{content_color:!active0}]">1000+机构覆盖全国</span>
          </span>
        </div>

        <div @click="imgClick(1)" :class="[{bk:active1},{organ:!active1}]">
          <img style="vertical-align: middle;margin: 5% 5% 5% -15%" :src="smallImgUrl1" />
          <span align="left" :class="[{font:active1},{content:!active1}]">家属预约<br>
            <span :class="[{color:active1},{content_color:!active1}]">添加家属享受体检折扣</span>
          </span>
        </div>

        <div @click="imgClick(2)" :class="[{bk:active2},{organ:!active2}]">
          <img style="vertical-align: middle;margin: 5% 5% 5% -15%" :src="smallImgUrl2" />
          <span align="left" :class="[{font:active2},{content:!active2}]">报告查询<br>
            <span :class="[{color:active2},{content_color:!active2}]">在线领取报告免费解读</span>
          </span>
        </div>

        <div @click="imgClick(3)" :class="[{bk:active3},{organ:!active3}]">
          <img style="vertical-align: middle;margin: 5% 5% 5% -8%" :src="smallImgUrl3" />
          <span align="left" :class="[{font:active3},{content:!active3}]">在线问诊<br>
            <span :class="[{color:active3},{content_color:!active3}]">各科室名医在线问诊咨询</span>
          </span>
        </div>

        <div @click="imgClick(4)" :class="[{bk:active4},{organ:!active4}]">
          <img style="vertical-align: middle;margin: 5% 5% 5% -4%" :src="smallImgUrl4" />
          <span align="left" :class="[{font:active4},{content:!active4}]">企业看板<br>
            <span :class="[{color:active4},{content_color:!active4}]">企业员工健康数据一目了然</span>
          </span>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'Index',
  data () {
    return {
      // 机构随心
      // 字体颜色/icon
      active0: false,
      active1: false,
      active2: false,
      active3: false,
      active4: false,
      imgList: [require('../assets/P机构随心.png'), require('../assets/P家属预约.png'), require('../assets/P报告查询.png'), require('../assets/P在线问诊.png'), require('../assets/P企业看板.png')],
      imgUrl: require('../assets/P机构随心.png'),
      smallIconUrlGreen: [require('../assets/i机构（绿）.png'), require('../assets/i预约（绿）.png'), require('../assets/i查询报告（绿）.png'), require('../assets/i问诊（绿）.png'), require('../assets/i看板（绿）.png')],
      smallIconUrlWhite: [require('../assets/i机构（白）.png'), require('../assets/i预约（白）.png'), require('../assets/i查询报告（白）.png'), require('../assets/i问诊（白）.png'), require('../assets/i看板（白）.png')],
      // 默认初始小icon是绿色
      smallImgUrl0: require('../assets/i机构（绿）.png'),
      smallImgUrl1: require('../assets/i预约（绿）.png'),
      smallImgUrl2: require('../assets/i查询报告（绿）.png'),
      smallImgUrl3: require('../assets/i问诊（绿）.png'),
      smallImgUrl4: require('../assets/i看板（绿）.png'),
    }
  },
  methods: {
    // 由于代码太长，这里只贴出index==0，后面的实现一样

    imgClick (index) {
      // 当索引==0时
      if (index == 0) {  
        // 同时切换对应的背景图
        this.imgUrl = this.imgList[index] 
        // 同时切换对应的小的白色icon，另外其它4个保持绿色不变
        this.smallImgUrl0 = this.smallIconUrlWhite[index]
        this.smallImgUrl1 = this.smallIconUrlGreen[1]
        this.smallImgUrl2 = this.smallIconUrlGreen[2]
        this.smallImgUrl3 = this.smallIconUrlGreen[3]
        this.smallImgUrl4 = this.smallIconUrlGreen[4]
        // 当active0 = true，当前点击的div颜色变成绿色，其它保持白色不变，以及字体颜色不变
        this.active0 = true
        this.active1 = false
        this.active2 = false
        this.active3 = false
        this.active4 = false
      }
    }
  }
}
</script>

<style scoped>
  /*icon*/
  .bk{
    background: #019A92;text-align: center;cursor: pointer;margin-top: 10%
  }
  .organ{
    background-color: #FFFFFF;text-align: center;cursor: pointer;margin-top: 10%
  }
  /*字体颜色*/
  .font{
    font-size: 100%; color: #FFFFFF;display: inline-block;vertical-align: middle
  }
  .content{
    font-size: 100%; color: #019A92;display: inline-block;vertical-align: middle
  }
  .color{
    font-size: 80%;color: #FFFFFF;
  }
  .content_color{
    font-size: 80%;color: #7D7D7D;
  }
</style>

我这个实现方法是比较傻瓜式的，如大家有更巧妙或更高明的办法欢迎留言告诉我，一起学习~~