需求：点击下方小图时，上方大图转换为相对应小图。
代码实现部分
注： 此文章为作者第一次使用vue做电商网站时的小结，如有错误请及时私信作者。希望大家一起学习共同进步！
JS部分
[html] view plain copy
export default {
data() {
return {
imgUrl: [
{ index:1, url: require('./img/goods1.png') },
{ index:2, url: require('./img/goods2.png') },
{ index:3, url: require('./img/goods3.png') },
{ index:4, url: require('./img/goods4.png') },
{ index:5, url: require('./img/goods5.png') },
],
//大图片默认显示第一张
ImgUrl:require('./img/goods1.png')
}
},
//点击小图片时将图片路径赋值给大图
getIndex(imgUrl){
this.ImgUrl = imgUrl;
}
}
};
注：此文章为作者第一次使用vue做电商网站时的小结，如有错误请及时私信作者。希望大家一起学习共同进步！
JS部分
[html] view plain copy
export default {
data() {
return {
imgUrl: [
{ index:1, url: require('./img/goods1.png') },
{ index:2, url: require('./img/goods2.png') },
{ index:3, url: require('./img/goods3.png') },
{ index:4, url: require('./img/goods4.png') },
{ index:5, url: require('./img/goods5.png') },
],
//大图片默认显示第一张
ImgUrl:require('./img/goods1.png')
}
},
//点击小图片时将图片路径赋值给大图
getIndex(imgUrl){
this.ImgUrl = imgUrl;
}
}
};
注：此文章为作者第一次使用vue做电商网站时的小结，如有错误请及时私信作者。希望大家一起学习共同进步！
