vue点击切图简易版/淘宝版

vue点击切图简易版/淘宝版

css需要自己写哦，超级简单的，超级易懂

下面展示 代码。

// template 讲解区域
<template>
  <div>
         <!-- 大图 -->
              <div >
              <!-- 图片 =  picUrl 大图片路径 -->
             	   <img :src="picUrl" alt="">
        	 </div>
          <!-- 小图 -->
            <ul>
            	<!-- 渲染到页面的小图片，并设置了一个名为“tab（i）”的点击事件 -->
                <li v-for="(item,i) in agim" :key="i" @click="tab(i)">
                  <img :src="item.url" />
                </li>
            </ul>
      </div>
</template>

// template 复制区域
<template>
  <div>
      <!-- 大图 -->
      <div>
         <img :src="picUrl" alt="">
      </div>
      <!-- 小图 -->
         <ul class="clearfix">
            <li v-for="(item,i) in agim" :key="i" @click="tab(i)">
               <img :src="item.url" />
            </li>
         </ul>
      </div>
</template>

**这里切断，区分一下，嘻嘻

// script的内容 讲解区域
<script>
export default {
  data () {
    return {
      // 这里是大图的默认图片路径
      picUrl: require('../../assets/banner/banner1.jpg'),
      // 这里是通过v-for渲染到页面的小图片路径
      agim: [
        {url: require('../../assets/banner/banner1.jpg'), id: 1},
        {url: require('../../assets/banner/banner2.jpg'), id: 2},
        {url: require('../../assets/banner/banner3.jpg'), id: 3}
      ]
    }
  },
  methods: {
  // 通过点击事件将大图片的路径更改为当前点击的图片的路径
    tab (index) {
      this.picUrl = this.agim[index].url
      //下面是测试的时候，想试试能不能打印出图片的ID，也就是想试试是不是已经获取到了
	  console.log(this.agim[index].id)
    }
  }
}
</script>

// script的内容，复制区域
<script>
export default {
  data () {
    return {
      picUrl: require('../../assets/banner/banner1.jpg'),
      agim: [
        {url: require('../../assets/banner/banner1.jpg'), id: 1},
        {url: require('../../assets/banner/banner2.jpg'), id: 2},
        {url: require('../../assets/banner/banner3.jpg'), id: 3}
      ]
    }
  },
  methods: {
    tab (index) {
      this.picUrl = this.agim[index].url
      console.log(this.agim[index].id)
    }
  }
}
</script>

最后来自小白的小点
多多使用打印 console.log（）
请多多使用打印 console.log（）
一定要请多多使用打印 console.log（）