虽然字母顺序变了
分类:彩世界开奖app苹果下载-编程

  • 微信小程序进阶开发-checkbox 运用、form 表单取值和提交
  • 微信小程序进阶开发-wx:for 循环列表
  • 微信小程序进阶开发-wx:key 高级列表循环
  • 微信小程序进阶开发-顶部菜单、利用 data 属性实现菜单当前项
  • 微信小程序进阶开发-下拉刷新
  • 彩世界开奖app苹果下载,微信小程序进阶开发-上滑加载更多
  • 微信小程序进阶开发-picker 实现选择框、时间选择、日期选择、性别选择……
  • 微信小程序进阶开发-模态输入对话框

让我们先看看代码

.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 那一项。效果如下:

彩世界开奖app苹果下载 1

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

彩世界开奖app苹果下载 2

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

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

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

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

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

彩世界开奖app苹果下载 3

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

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

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

  • 微信小程序进阶开发-checkbox 运用、form 表单取值和提交
  • 微信小程序进阶开发-wx:for 循环列表
  • 微信小程序进阶开发-wx:key 高级列表循环
  • 微信小程序进阶开发-顶部菜单、利用 data 属性实现菜单当前项
  • 微信小程序进阶开发-下拉刷新
  • 微信小程序进阶开发-上滑加载更多
  • 微信小程序进阶开发-picker 实现选择框、时间选择、日期选择、性别选择……
  • 微信小程序进阶开发-模态输入对话框

本文由彩世界开奖发布于彩世界开奖app苹果下载-编程,转载请注明出处:虽然字母顺序变了

上一篇:它读取当前 view 的 dataset 中的 下一篇:二、在微信开发者工具中预览时
猜你喜欢
热门排行
精彩图文