Uniapp循环出来,图片是同一张,根据下标,点击图片变成另一个图片,再次点击变回原来图片
时间: 2023-12-10 22:04:32 浏览: 254
WPF 图片滑动轮播,按钮滑动,左右滑动,下标点击定位
5星 · 资源好评率100%
好的,针对您的问题,您可以在模板中使用 `v-for` 循环渲染出图片,然后使用 `v-bind` 绑定 `src` 属性来动态设置图片地址。同时,您可以在每个图片上绑定 `click` 事件,通过判断当前的图片地址来实现点击切换图片的功能。
下面是一个示例代码,供您参考:
```html
<template>
<div>
<div v-for="(item, index) in imgList" :key="index">
<img :src="item.src" @click="toggleImg(index)">
</div>
</div>
</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 {
this.imgList[index].src = 'img1.png';
}
}
}
}
</script>
```
在上述示例中,我们使用了 `v-for` 循环渲染出了多个图片,并使用 `toggleImg` 方法来切换图片的地址。在 `toggleImg` 方法中,我们通过判断当前图片的地址是否为默认地址来切换图片。这样,就能实现根据下标点击图片切换的功能了。
阅读全文