vue 点击按钮时切换图片改变文字颜色

<div class="home">
    <ul>
        <li v-for="(item, index) in tabs" :key="index"
          :class="cutIndex == item.state ? 'home-hover' : ''"
          @click="handleMap(item.state)"
        >
          <img :src="cutIndex == item.state ? item.iconActive : item.icon" />{{
            item.name
          }}
        </li>
    </ul>
</div>

.home {
  position: absolute;
  bottom: 20px;
  left: 0px;
  right: 60px;
  z-index: 99990;
  ul {
    position: relative;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 630px;
    background: #fff;
    border: 1px solid #bfbfbf;
    color: #333;
    li {
      display: inline-block;
      height: 35px;
      line-height: 35px;
      padding-left: 16px;
      padding-right: 0px;
      font-size: 12px;
      cursor: pointer;
      img {
        vertical-align: -20%;
        margin-right: 5px;
      }
    }
    .home-hover {
      color: #105cb5;
      font-weight: bold;
    }
  }
}

import allPng from "../assets/icon/all.png";
import allTouchPng from "../assets/icon/allHover.png";
import homePng from "../assets/icon/home.png";
import homeTouchPng from "../assets/icon/homeHover.png";

data() {
    return {
      cutIndex:-1,
      tabs: [
        { name: "所有", icon: allPng, iconActive: allTouchPng, state: 0 },
        {
          name: "主页",
          icon: homePng,
          iconActive: homeTouchPng,
          state: 1,
        },
        
      ],
    };
  },
  methods: {
    handleMap(state) {
      console.log(state)
      this.cutIndex = state;
    },
  },