Uniapp循环出来,图片是同一张,根据下标,点击图片变成另一个图片,再次点击变回原来图片
时间: 2023-12-10 18:04:32
浏览: 89
好的,针对您的问题,您可以在模板中使用 `v-for` 循环渲染出图片,然后使用 `v-bind` 绑定 `src` 属性来[动态](https://geek.csdn.net/educolumn/08aef4ab97997f5b9ed71860c44e8258?spm=1055.2569.3001.10083)设置图片[地址](https://geek.csdn.net/educolumn/14a4193cfe4be4597b0afe7044078e22?spm=1055.2569.3001.10083)。同时,您可以在每个图片上绑定 `click` 事件,通过判断当前的图片[地址](https://geek.csdn.net/educolumn/14a4193cfe4be4597b0afe7044078e22?spm=1055.2569.3001.10083)来实现点击切换图片的[功能](https://geek.csdn.net/educolumn/0cf712bbe06919ce80efc8d763fefd03?spm=1055.2569.3001.10083)。
下面是一个示例[代码](https://geek.csdn.net/educolumn/1572ef9b473b4e00f6b2bf6d428b7c27?spm=1055.2569.3001.10083),供您参考:
```html
<template>
<div v-for="(item, index) in imgList" :key="index">
<img :src="item.src" @click="toggleImg(index)">
</template>
<script>
export default {
data() {
return {
imgList: [
{ src: 'img1.png', active: false },
{ src: 'img1.png', active: false },
{ src: 'img1.png', active: false },
// ...
methods: {
toggleImg(index) {
if (this.imgList[index].src === 'img1.png') {
this.imgList[index].src = 'img2.png';
} else {
```
相关推荐















