代码如下:
<div class="xq_nr"> <!-- 三种图片 --> <div class="left"> <img :src="cpimg" alt=""> </div> <div class="right"> <div class="xhimg" v-for="(item, i) in imgData" :key="i" @click="cpimg = item.img_3, active = i" > <img v-if="active === i" :src="item.img_2" alt=""> <img v-else :src="item.img_1" alt=""> </div> </div> </div>
js代码:
<script> export default { name: '****', data () { return { cpimg: require('../../static/img/chanpin_aihuta_child.png'), imgData: [ { img_1: require('../../static/img/chanpin_child_weixuan.png'), img_2: require('../../static/img/chanpin_child_xuanzhong.png'), img_3: require('../../static/img/chanpin_aihuta_child.png') }, { img_1: require('../../static/img/chanpin_people_weixuan拷贝.png'), img_2: require('../../static/img/chanpin_people_xuanzhong.png'), img_3: require('../../static/img/chanpin_aihuta_people.png') }, { img_1: require('../../static/img/chanpin_old_weixuan拷贝.png'), img_2: require('../../static/img/chanpin_old_xuanzhong.png'), img_3: require('../../static/img/chanpin_aihuta_old.png') } ], active: 0 } } } </script>
css代码:
.xq_nr { height: 470px; display: flex; padding: 15px 40px; .right { width: 265px; padding-left: 30px; .xhimg{ width: 262px; height: 132px; padding-bottom: 15px; position: relative; img{ position: absolute; right: 0; } } } }
效果图如下: