<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> ul{ list-style: none } .lunbo{ height: 400px; 400px; } .lunbo ul li{ float: left; 30px; height: 30px; background-color: darkred; color: white; line-height: 30px; text-align: center; } </style> </head> <body> <div id="app"> {{time}} <div class="lunbo"> <img :src="currentSrc" alt=""> <ul> <li v-for="(item,i) in imgArr" @click='currentHandler(item)'>{{i+1}}</li> </ul> </div> <button @click="nextImg">下一张</button> </div> <script src="./js/vue.js"></script> <script> var app=new Vue({ el:"#app", data:{ msg:"hello world!", currentSrc:"./img/1.jpg", time:`页面加载于${new Date().toLocaleString()}`, imgArr:[ {id:1,scr:"./img/1.jpg"}, {id:2,scr:"./img/2.jpg"}, {id:3,scr:"./img/3.jpg"}, {id:4,scr:"./img/4.jpg"} ], currentIndex:0, }, methods:{ currentHandler(item){ this.currentSrc=item.scr; }, nextImg(){ if(this.currentIndex==this.imgArr.length-1){ this.currentIndex=-1; } this.currentIndex++; //console.log(this.currentIndex); this.currentSrc=this.imgArr[this.currentIndex].scr; } } }) </script> </body> </html>