Senarai applet WeChat rendering wx:for

wx:for

Gunakan atribut kawalan wx:for pada komponen untuk mengikat tatasusunan dan komponen itu boleh dipaparkan berulang kali menggunakan data setiap item dalam tatasusunan. wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item

<view wx:for="{{items}}">
  {{index}}: {{item.message}}</view>

Page({
  items: [{
    message: 'foo',
  },{
    message: 'bar'
  }]
})

使用wx:for-item可以指定数组当前元素的变量名

使用wx:for-index可以指定数组当前下标的变量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

wx:for也可以嵌套，下边是一个九九乘法表

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

block wx:for

类似block wx:if，也可以将wx:for用在<block/>标签上，以渲染一个包含多节点的结构块。例如：

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 中的输入内容，<switch/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warningNama pembolehubah lalai bagi item semasa dalam tatasusunan ialah indeks, dan nama pembolehubah item semasa dalam tatasusunan lalai kepada item

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>

<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>

Page({
  data: {
    objectArray: [
      {id: 5, unique: 'unique_5'},
      {id: 4, unique: 'unique_4'},
      {id: 3, unique: 'unique_3'},
      {id: 2, unique: 'unique_2'},
      {id: 1, unique: 'unique_1'},
      {id: 0, unique: 'unique_0'},
    ],
    numberArray: [1, 2, 3, 4]
  },  switch: function(e) {    const length = this.data.objectArray.length    for (let i = 0; i < length; ++i) {      const x = Math.floor(Math.random() * length)      const y = Math.floor(Math.random() * length)      const temp = this.data.objectArray[x]      this.data.objectArray[x] = this.data.objectArray[y]      this.data.objectArray[y] = temp
    }    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addToFront: function(e) {    const length = this.data.objectArray.length    this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addNumberToFront: function(e){    this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)    this.setData({
      numberArray: this.data.numberArray
    })
  }
})

Gunakan wx:for- item boleh menentukan nama pembolehubah bagi elemen semasa tatasusunanGunakan wx:for-index untuk menentukan nama pembolehubah subskrip semasa tatasusunan:

rrreee

wx:for Ia juga boleh bersarang di bawah ialah jadual pendaraban
rrreee

block wx:for
serupa dengan `block. wx:if`, anda juga boleh menggunakan `wx:for` digunakan pada teg `<block/>` untuk menjadikan blok struktur yang mengandungi berbilang nod. Contohnya:
rrreee

wx:key

Jika kedudukan item dalam senarai akan berubah secara dinamik atau item baharu ditambahkan pada senarai, dan anda mahu item dalam senarai mengekalkan cirinya sendiri dan status (seperti Kandungan input dalam<input/>, keadaan <switch/> yang dipilih), anda perlu menggunakan wx: key untuk menentukan senarai Pengecam unik projek.

wx:key Nilai disediakan dalam dua bentuk

String, mewakili sifat item dalam tatasusunan gelung for, nilai harta itu perlu dalam senarai Rentetan atau nombor unik yang tidak boleh ditukar secara dinamik.
Kata kunci terpelihara *this mewakili item itu sendiri dalam gelung untuk Perwakilan ini memerlukan item itu sendiri menjadi rentetan atau nombor unik, seperti:

wx:key

amaran

Senarai applet WeChat rendering wx:for

wx:for

block wx:for

wx:key

block wx:for serupa dengan block. wx:if, anda juga boleh menggunakan wx:for digunakan pada teg <block/> untuk menjadikan blok struktur yang mengandungi berbilang nod. Contohnya: rrreee

wx:key

Laman web PHP Cina

block wx:for
serupa dengan `block. wx:if`, anda juga boleh menggunakan `wx:for` digunakan pada teg `<block/>` untuk menjadikan blok struktur yang mengandungi berbilang nod. Contohnya:
rrreee