vue完成图片的单击切换--click事件
思路:根据图片的下标切换图片路径,使用v-for循环出小图片地址,大图片地址根据小图片的地址切换代码如下:<div class="phoneP-box-left floatL"><div class="left-bImg"><img :src="'../../static/phone-img/phone'+itemIndex+'.p...
·
思路:根据图片的下标切换图片路径,使用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>
更多推荐
已为社区贡献4条内容
所有评论(0)