核心思路分析(仅供参考):
①数组存储图片路径 → 【图片1,图片2,图片3....】
②准备下标index,数组【下标】 → v-bind设置src展示图片 → 修改下标切换图片
<body>
<div id="app">
<button v-show="index > 0" @click="index--">上一页</button>
<div>
<img :src="list[index]" alt="">
</div>
<button v-show="index < list.length -1" @click="index++">下一页</button>
</div>
</body>
<script src="./JS/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data:{
index:3,
list:[
'./imgs/sellpoint1.png',
'./imgs/sellpoint2.png',
'./imgs/sellpoint3.png',
'./imgs/sellpoint4.png',
'./imgs/sellpoint5.png',
'./imgs/sellpoint6.png'
]
}
})
</script>