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

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

 

代码实现部分

HTML部分

<div class="goodDetails_name_img">
 
     <div style="width: 300px;height: 300px">
            <img :src="ImgUrl" style="width: 100%;height: 100%">
     </div>
 
    <div class="little_img" >
        <ul v-for="img in imgUrl">
            <li @click='getIndex(img.url)'>
                <img :src="img.url" style="width: 50px; height: 50px" >
            </li>
        </ul>
    </div>
 
</div>

 

JS部分

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;
    }
    }
};