vue实现点击切换图片
时间: 2023-09-02 19:11:37 浏览: 67
您好!感谢您使用ChitGPT进行对话。针对您的问题,实现点击切换图片,可以通过Vue中的v-bind和v-on指令来实现。首先,您需要在Vue实例中定义一个data属性,用于保存当前显示的图片路径。然后,您可以使用v-bind指令绑定img标签的src属性到这个data属性,以显示当前图片。最后,使用v-on指令绑定click事件,通过修改data属性的值,来切换显示的图片。以下是示例代码:
```
<template>
<div>
<img v-bind:src="currentImgSrc" v-on:click="changeImg">
</div>
</template>
<script>
export default {
data() {
return {
imgSrcs: ['img1.png', 'img2.png', 'img3.png'],
currentImgIndex: 0
}
},
computed: {
currentImgSrc() {
return this.imgSrcs[this.currentImgIndex]
}
},
methods: {
changeImg() {
if (this.currentImgIndex === this.imgSrcs.length - 1) {
this.currentImgIndex = 0
} else {
this.currentImgIndex++
}
}
}
}
</script>
```
希望这个答案能够帮助您!如果您有其他问题,请继续提出。