vue列表左右箭头滑动_vue点击左右箭头改变数据

vue点击左右箭头改变数据

vue点击左右箭头改变数据

点击箭头的时候改变图片和左边的文字信息

html中绑定数据

{{imageList[number].introduce}}

姓名:

{{imageList[number].name}}

职位:

{{imageList[number].Job}}

在data中提供数据，并且在methods中提供方法

imageList: [

{ name: 'wkc', introduce: 'afafadfaf', Job: 'sdad', url: firstImg },

{ name: 'dh', introduce: 'hahaah', Job: 'dsw', url: secondImg },

{ name: 'myz', introduce: 'enenen', Job: 'vf', url: threeImg },

{ name: 'syd', introduce: 'xixixi', Job: 'sdf', url: fourImg },

],

number: 0

methods：{

ChangeDown () {

this.number--

if (this.number < 0) {

this.number = this.imageList.length - 1

}

console.log(this.number);

},

ChangeUp () {

if (this.number === this.imageList.length - 1

) {

this.number = 0

}

else {

this.number++

}

}

}

vue点击左右箭头改变数据相关教程