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