Vue中图片切换（改变按钮的状态）

实现按钮图片的状态改变，要求：同一时间能只有一个按钮处于选中状态。

 <div class="play-btn">
      <img
        v-for="(item,index) in imgList"
        :key="index"
        :src="activeIndex === index ? item.img2 : item.img1"
        @click="changeColor(index)"
      />
    </div>

export default {
  name: "Control",
  data() {
    return {
      activeIndex: 0,
      imgList: [
        {
          img1: require("../../assets/image/index/suspend_02.png"),
          img2: require("../../assets/image/index/suspend_01.png"),
        },
        {
          img1: require("../../assets/image/index/play_02.png"),
          img2: require("../../assets/image/index/play_01.png"),
        },
        {
          img1: require("../../assets/image/index/stop_02.png"),
          img2: require("../../assets/image/index/stop_01.png"),
        },
      ],
    };
  },
  methods: {
    // 播放功能按钮状态改变
    changeColor(index) {
      console.log(index);
      this.activeIndex = index;
    },

  },
  mounted() {
    mainFn();
  },
};

大可教的方法