Vue 点击图标切换效果：实现独立图标状态变化

可以使用 Vue 的条件渲染来实现点击图标切换的效果。首先，创建一个 Vue 实例，并定义一个 data 属性来存储每个图标的状态。然后，在模板中使用 v-for 指令来循环渲染每个图标，并利用 v-bind 指令动态绑定每个图标的 src 和 click 事件。最后，在 click 事件处理方法中，改变对应图标的状态。

下面是一个示例代码：

<div id="app">
  <img v-for="(icon, index) in icons" :key="index" :src="icon.src" @click="toggleIcon(index)" :class="{ active: icon.active }">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      icons: [
        { src: "icon1.png", active: false },
        { src: "icon2.png", active: false },
        { src: "icon3.png", active: false }
      ]
    },
    methods: {
      toggleIcon(index) {
        this.icons[index].active = !this.icons[index].active;
      }
    }
  });
</script>

在上面的代码中，icons 数组存储了每个图标的信息，包括图标的路径和状态。在模板中使用 v-for 指令循环渲染每个图标，并通过 v-bind 指令动态绑定图标的 src 和 click 事件。通过切换图标的 active 属性来改变图标的状态，如果 active 为 true，则给图标添加 active 类，从而改变图标的样式。

请注意，上述示例中的图标路径需要根据实际情况进行修改，并确保图标文件存在。