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