需求:点击下方小图时,上方大图转换为相对应小图。
代码实现部分
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;
}
}
};
注:此文章为作者第一次使用vue做电商网站时的小结,如有错误请及时私信作者。希望大家一起学习共同进步!