点击 li 实现内部两个图片的切换
<li class="icon_item" v-for="(item,index) in icon_list" @click="handleDraw(item)" >
<img v-if="item.isDraw" src="<?php echo $_global['url']['front'];?>/assets/img/h5/weixin.png" alt="抽奖icon1">
<img v-else src="<?php echo $_global['url']['front'];?>/assets/img/h5/zhifubao.png" alt="抽奖icon2">
<span>@{{item.day}}</span>
</li>
数据格式 对象方式解耦
icon_list:[
{id:1,isDraw:false,day:"1天"},
{id:2,isDraw:false,day:"2天"},
{id:3,isDraw:false,day:"3天"},
{id:4,isDraw:false,day:"4天"},
{id:5,isDraw:false,day:"5天"},
{id:6,isDraw:false,day:"6天"},
{id:7,isDraw:false,day:"7天"},
{id:8,isDraw:false,day:"8天"}
]
方法 修改传递 对象属性,并不是 全局数据
handleDraw(item){
item.isDraw = !item.isDraw;
}
网友评论