美文网首页
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列表项 修改自身

    点击 li 实现内部两个图片的切换 /assets/img/h5/weixin.png"alt="抽奖icon1...

  • CSS学习5

    列表 CSS 列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志。 css列表属性: 代码举例: 修改用...

  • 更改li前的图案

    list-style-type 属性可以用来修改用于列表项的标志类型。 常用的图案 列表项图像 有时,常规的标志是...

  • R语言编程-Tidyverse 书籍-第二章(2)

    修改列 修改列,即修改数据框的列,计算新列。 创建列——mutate() 用dplyr 包中的mutate() 创...

  • 列表

    1、无序列表: 无序列表始于 标签 每个列表项始于 标签 2、有序列表: 有序列表也是一列项目,列表项目使用数字...

  • 为什么使用v-for时必须添加唯一的key?

    首次发表在个人博客 v-for中的key 使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的...

  • 有序列表与无序列表

    1.有序列表: 有序列表同样,有序列表也是一列项目,列表项目使用数字进行标记。有序列表始于标签 。每个列表项始于 ...

  • 修改表结构

    查找一个表结构 desc是describe的缩写 添加列 删除列 修改列 修改列名 修改表名

  • SQL常用却经常忘的语句

    一、修改表: 1、修改表名 2、添加列 3、删除列 4、修改列名 5、修改列类型 二、查看表 1、查看表结构

  • 2018-05-31

    我的世界 #我的世界# * 这是一个列表项 这是第一列表项中的第二个段落 * 这是列表的另一个项目

网友评论

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

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