Vue 实现触摸图标切换效果：独立状态，快速上手

要在 Vue 中实现触摸图标切换的效果，并且每个图标的效果独立，可以使用 Vue 的事件绑定和数据绑定功能。以下是一种实现方式：

在 Vue 组件中定义一个 data 属性，用于存储每个图标的状态：

data() {
  return {
    icons: [
      { src: 'icon1.png', activeSrc: 'icon1-active.png', active: false },
      { src: 'icon2.png', activeSrc: 'icon2-active.png', active: false },
      { src: 'icon3.png', activeSrc: 'icon3-active.png', active: false },
      // 添加更多图标
    ]
  }
}

在模板中使用 v-for 指令遍历 icons 数组，并使用 v-bind 指令绑定图标的 src 和 active 属性：

<template>
  <div>
    <img v-for='(icon, index) in icons' :src='icon.active ? icon.activeSrc : icon.src' @touchstart='toggleIcon(index)' :key='index'>
  </div>
</template>

在 methods 中定义 toggleIcon 方法，用于切换图标的状态：

methods: {
  toggleIcon(index) {
    this.icons[index].active = !this.icons[index].active;
  }
}

通过以上步骤，每个图标都有独立的状态，当触摸图标时，对应的图标状态会切换，从而实现图标变化的效果。