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

}

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