仿淘宝-商品详情点击小图展示大图

<template>
  <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>
</template>
  data() {
    return {
      imgUrl: [
        { index:1, url: require('../assets/img/help/help1.png') },
        { index:2, url: require('../assets/img/help/help2.png') },
        { index:3, url: require('../assets/img/help/help3.png') },
      ],
      //大图片默认显示第一张
      ImgUrl:require('../assets/img/help/help1.png')
    };
  },
  methods: {
    //点击小图片时将图片路径赋值给大图
    getIndex(imgUrl) {
      this.ImgUrl = imgUrl;
    }
  },

试过了，完全就是我要的效果
参考：https://www.cnblogs.com/woniu666/p/13304410.html?utm_source=tuicool