vue 实现无限轮播_vue中轮播图的实现

Title

上一张

下一张

let vm = new Vue({ // 声明变量 实例化一个对象vm(指的是vue的实例)

el:"#app", //绑定根元素

data(){

return{

images:[ //数据

{id:1,imgSrc:"img/1.jpg"},

{id:2,imgSrc:"img/2.jpg"},

{id:3,imgSrc:"img/3.jpg"},

// {id:4,imgSrc:"img/4.jpg"},

],

currentIndex:0 //一开始设置为 0

}

},

methods:{// 对象内容是js函数

nextHandler(e){

console.log(e);

this.currentIndex++;

//更改图片地址

if (this.currentIndex == 3){ //js的if判断语句

this.currentIndex = 0;

}

},

prevHandler(e) {

console.log(e);

this.currentIndex--;

//更改图片地址

if (this.currentIndex == 0) { //js的if判断语句

this.cur