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

最新推荐文章于 2024-10-13 21:13:26 发布

原创最新推荐文章于 2024-10-13 21:13:26 发布 · 1.6w 阅读

6 ·

CC 4.0 BY-SA版权

web前端同时被 2 个专栏收录

36 篇文章

订阅专栏

vue

21 篇文章

订阅专栏

本文介绍了一个基于Vue的图片切换组件实现方法，通过v-for循环展示小图并使用@click事件监听来切换大图显示，实现了图片预览效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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