微信小程序 wx key 高级列表循环

首先给大家推荐一下我老师大神的人工智能教学网站。教学不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵黄段子!点这里可以跳转到网站

让我们先看看代码

.wxml 代码 <block wx:for=”{{items}}”>
  <label><checkbox />{{item.title}}</label>
</block>
<button bindtap=”chng”>变更项</button>

.js 代码   data: {
    items: [
{
  id: 1,
  title: “a”
},
{
  id: 2,
  title: “b”,
},
{
  id: 3,
  title: “c”,
}
]
},

  chng: function(e){
    this.setData({
      items: [
{
  id: 2,
  title: “b”
},
{
  id: 1,
  title: “a”,
},
{
  id: 3,
  title: “c”,
}
]
  })
}

效果如下:

点击按钮“变更项”前,我们选中第二项,即 b 那一项。效果如下:

wx:for 循环

点击按钮“变更项”后,我们改变了 items 项的顺序。效果如下:

wx:for 循环

虽然字母顺序变了,但是选择项没有变。

如果我们希望用户输入也跟随,则使用 wx:key

wx:key 指定 items 中一个具有唯一值的属性,比如我们这里的 id,

将 <block wx:for=”{{items}}”> 改为 <block wx:for=”{{items}}” wx:key=”id”>,注意:是 wx:key=”id”,不是 wx:key=”{{id}}”。

此时,点击按钮“变更项”后,我们改变了 items 项的顺序。效果如下:

wx:for 循环

以上只是改变顺序,如果是改变 items 元素个数,道理一样的。

再细化一下,如果我们对 checkbox 使用了 checked=”{{checked}}”,而 setData 赋新值时为数组元素设置了:{ id:2, checked:false, title:”b” }, 而在点按钮之前又选中了 b,点按钮后,是继续选中 b,还是听新值的呢?听新值的。

那新值不要 checked 属性,是不是就继续选中 b 呢?也不是,因为没有赋值,对 {{checked}} 来说,相当于 false(boolean 默认值是 false)。

点这里可以跳转到人工智能网站

0 0 投票数
文章评分
订阅评论
提醒
0 评论
内联反馈
查看所有评论
0
希望看到您的想法,请发表评论。x
()
x