VueJS实现仅修改被点击图片的src属性问题求助

你当前的问题是所有图片绑定了同一个icon变量，所以修改时会全部变化。针对非循环渲染的场景，有两种常用解决方式：

方案一：数据驱动（推荐，符合Vue设计理念） #

给每个图片单独维护状态，通过点击事件传递标识来修改对应图片的src：

模板代码 #

<div id="app">
  <div>         
    <img :src="icons.img1" @click="change('img1')" />
  </div>
  <div>          
    <img :src="icons.img2" @click="change('img2')" />
  </div>
  <div>                
    <img :src="icons.img3" @click="change('img3')" />
  </div>
</div>

JS代码 #

const app = Vue.createApp({
  data() {
    return {
      // 给每个图片单独设置初始src
      icons: {
        img1: 'index.png',
        img2: 'index.png',
        img3: 'index.png'
      }
    }
  },
  methods: {
    // 根据传入的标识修改对应图片的src
    change(imgKey) {
      this.icons[imgKey] = 'icon.png'
    }
  }
})
        
app.mount('#app')

方案二：直接操作DOM（快速解决） #

通过事件对象获取当前点击的图片元素，直接修改它的src属性：

模板代码 #

<div id="app">
  <div>         
    <img :src="icon" @click="change($event)" />
  </div>
  <div>          
    <img :src="icon" @click="change($event)" />
  </div>
  <div>                
    <img :src="icon" @click="change($event)" />
  </div>
</div>

JS代码 #

const app = Vue.createApp({
  data() {
    return {
      icon: 'index.png'
    }
  },
  methods: {
    change(e) {
      // 获取当前点击的img元素，修改其src
      e.target.src = 'icon.png'
    }
  }
})
        
app.mount('#app')

内容的提问来源于stack exchange，提问作者user18262393