vue2通过点击切换图片显示
时间: 2023-09-14 21:10:02 浏览: 44
可以使用v-bind来动态切换图片的src属性,同时在点击事件中修改对应的图片路径。
HTML代码:
```html
<template>
<div>
<img :src="imgSrc" alt="图片">
<button @click="changeImg">切换图片</button>
</div>
</template>
```
JS代码:
```javascript
<script>
export default {
data() {
return {
imgSrc: './img1.jpg', // 初始图片路径
imgList: ['./img1.jpg', './img2.jpg', './img3.jpg'] // 图片路径列表
}
},
methods: {
changeImg() {
const index = this.imgList.indexOf(this.imgSrc) // 获取当前图片路径在列表中的索引
if (index === this.imgList.length - 1) { // 如果是最后一张图片,则切换到第一张
this.imgSrc = this.imgList[0]
} else { // 否则切换到下一张图片
this.imgSrc = this.imgList[index + 1]
}
}
}
}
</script>
```
在上面的代码中,imgSrc表示当前图片的路径,imgList表示图片路径列表。在changeImg方法中,我们首先获取当前图片路径在列表中的索引,如果是最后一张图片,则切换到第一张,否则切换到下一张图片。最后将修改后的图片路径赋值给imgSrc,即可动态切换图片。