需求：點選下方小圖時，上方大圖轉換為相對應小圖。

程式碼實現部分

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