vue完成图片的单击切换--click事件

思路:根据图片的下标切换图片路径,使用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>

版权声明:本文为qq_40976560原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。