Tab点击切换-----显示不同的图片内容

代码如下：

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

 

 

效果图如下：

转载于:https://www.cnblogs.com/yd-MM/p/9910398.html