vue中 商品详情页面布局及功能实现 点击小图切换大图

需求：点击下方小图时，上方大图转换为相对应小图。

---

代码实现部分

  

注： 此文章为作者第一次使用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做电商网站时的小结，如有错误请及时私信作者。希望大家一起学习共同进步！