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

【vue|vue 获取img的src值,让一张图片的值等于另一张图片】
文章图片

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

//这是大图片文章图片 //这是小图片文章图片

写data:

data:{ titleImg:"img/product01.png", items:[ { img01:"img/product01.png", }, { img01:"img/a2.jpg", }, { img01:"img/a3.jpg", }, { img01:"img/desk.png", }, ]}然后就是方法methodschangImg: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; }}

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