v-for列表项 修改自身

点击 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;

            }

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容