通过左右箭头控制图片轮播
效果展示:
html部分:
<div id="app">
<div id="box">
<span v-show="index!=0" @click="prev">
<img src="../image/left.webp" width="70">
</span>
<img v-bind:src="imgSrc[index]" width="200">
<span v-show="index<imgSrc.length-1" @click="next">
<img src="../image/right.webp" width="70">
</span>
</div>
</div>
vue部分:
var app=new Vue({
el:"#app",
data:{
imgSrc:["../image/1.jpg",
"../image/2.webp",
"../image/3.webp"],
index:0
},
methods: {
prev:function(){
this.index--
},
next:function(){
this.index++
}
}
})