v-for列表项 修改自身

2019-12-26  本文已影响0人  zhanghongzhen

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

            }

上一篇 下一篇

猜你喜欢

热点阅读