核心思路分析：
1、数据储存图片路径：[图片1，图片2，图片3,.....]
2、准备下标index, 数组[下标] v-bind设置src展示图片 修改下表切换图片
完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="vue.js"></script> </head> <body> <style> .tupian{ width: 500px; height: 500px; } </style> <div id="app"> <button v-show="index > 0" @click="index--">上一页</button> <div> <img :src="list[index]" alt="" class="tupian"> </div> <button v-show="index < list.length-1" @click="index++">下一页</button> </div> <script> const app=new Vue({ el:'#app', data:{ index:0, list:[ './img/1.png', './img/2.png', './img/3.png', './img/4.png', './img/5.png', './img/6.png', ] } }) </script> </body> </html>
效果：
扫一扫
1814
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
