美文网首页
v-for列表项 修改自身

v-for列表项 修改自身

作者: zhanghongzhen | 来源:发表于2019-12-26 13:46 被阅读0次

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

                }

    相关文章

      网友评论

          本文标题:v-for列表项 修改自身

          本文链接:https://www.haomeiwen.com/subject/fewkoctx.html