思路:根据图片的下标切换图片路径,使用v-for循环出小图片地址,大图片地址根据小图片的地址 切换

代码如下:

<div class="phoneP-box-left floatL">
				<div class="left-bImg">
					<img :src="'../../static/phone-img/phone'+itemIndex+'.png'"/>
				</div>
				<div class="left-sImg">
					<ul class="list-group clearfix">
					    <li class="list-group-item floatL" v-for="n in 5">
					    	<img :src="'../../static/phone-img/phone'+n+'.png'" @click="tab(n)"/>
					    </li>
					</ul>
    				</div>
</div>

<script>
export default {
	name: 'PhoneParticular',
	components: {},
	data (){
		return{
				itemIndex : 1
			}
		},
		//切换图片
		methods:{
			tab(index){
				this.itemIndex=index
			}
		}
	}
</script>
Logo

前往低代码交流专区

更多推荐