vue 获取img的src值,让一张图片的值等于另一张图片

点击四张小图片中任意一张，使大图片也和我点击的小图片是一样的，

首先是布局

<div id="titleImg">//这是大图片
    <div id="">
        <img :src="titleImg"/>
    </div>
</div>
<div id="clickImg">//这是小图片
    <div v-for="(item,index) in items"  @click="changImg(index)" :key="index">
        <img :src="item.img01"/>
    </div>
</div>

写data:

data:{
  titleImg:"img/product01.png",
  items:[
    {
        img01:"img/product01.png",
    },
    {
        img01:"img/a2.jpg",
    },
    {
        img01:"img/a3.jpg",
    },
    {
        img01:"img/desk.png",
    },
  ]

  }

然后就是方法methods

changImg:function(index){
    console.log(index)//获取四个小图片的索引
    var src1=this.items[0].img01;//获取每一个小图片相对应的src
    var src2=this.items[1].img01;
    var src3=this.items[2].img01;
    var src4=this.items[3].img01;
    //如果我点击的小图片索引为0的时候，这时大图片的src要等于索引为0小图片的src
    if(index == 0){
        this.titleImg=src1;
    }else if(index == 1){
        this.titleImg=src2;
    }
    else if(index == 2){
        this.titleImg=src3;
    }
    else if(index == 3){
        this.titleImg=src4;
    }

}

然后到现在就可以，点击任意一个小图片，大图片随时也改变