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点击左右箭头改变数据相关教程