Использование апплета WeChat wx:for и привязка wx:key

обзор

• wx: для базового использования
• wx:for-item и wx:for-index переименовать элемент и индекс
• wx:key два метода привязки и меры предосторожности

wx: для базового использования

данные бизнес-уровня

Page({
    
    
  data: {
    
    
    name: 'Leung',
  }
})

Просмотр слоя
wx: при обходе имя каждого элемента является itemименем каждого индексаindex

<view>
  <block wx:for="{
     
     {name}}" wx:key="item">
    <text>字符:{
   
   {item}}</text>
    <text>索引:{
   
   {index}}</text>
  </block>
</view>

wx:for-item и wx:for-index реализуют переименование элементов и индексов

wx:for-item="str"itemИзмените исходное имя на Измените str
wx:for-index="iисходное имя индекса наindexi

<view>
  <block wx:for="{
     
     {name}}" wx:key="str" wx:for-item="str" wx:for-index="i">
    <text>字符:{
   
   {str}}</text>
    <text>索引:{
   
   {i}}</text>
  </block>
</view>

привязка wx:key двумя способами

Способ 1: item
Способ 2: *thisПо *thisумолчаниюitem

Как привязать wx:key при использовании массива wx:for объектов хранилища

данные бизнес-уровня

Page({
    
    
  data: {
    
    
    books:[
      {
    
    id:'001',name:'你不知道的JavaScript'},
      {
    
    id:'002',name:'JavaScript高级程序设计'}
    ]
  }
})

Просмотр данных привязки слоя

Не используйте его напрямую wx:key="item"или wx:key="*this"потому, что каждый элемент данных, проходящий через цикл в это время, является 键值对объектом. wx:key="{}"Основной принцип преобразования строк после анализа переменных заключается в том, что ({}).toString()окончательный рендеринг [object Object]не может быть оптимизирован. wx:for="books"Автоматически разбирать каждый атрибут объекта при обходе можно напрямуюwx:key="id"

<view>
  <block wx:for="{
     
     {books}}" wx:key="id" wx:for-item="book">
    <view>
      {
   
   {book.name}}
    </view>
  </block>
</view>