使用wx:for

// js文件 Page({data: {array:[{id: 1,name: "張三",},{id: 2,name: "李四",}]}, }); <!--wxml文件--> <view wx:for="{{array}}" wx:for-index="id" wx:for-item="item">{{id}}: {{item.name}} </view>

渲染的頁面

理解for循環：

在組件上使用 wx:for 控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。

數組中當前項的下標變量名默認為 index，數組當前項的變量名默認為 item。

使用 wx:for-item 可以指定數組當前元素的變量名；使用 wx:for-index 可以指定數組當前下標的變量名，此變量名可以視為除索引外所有值的集合，通過.的方式調用某一具體值

使用上述for循環后，控制臺會輸出warning: Now you can provide attr wx:key for a wx:for to improve performance.，這表明使用wx:key能提高效率

[WXML Runtime warning] ./pages/demo/demo.wxmlNow you can provide attr `wx:key` for a `wx:for` to improve performance.37 | <input bindinput="handleInput" /> -->38 | > 39 | <view wx:for="{{array}}" wx:for-index="id" wx:for-item="item">| ^40 | {{id}}: {{item.name}}41 | </view>

wx:key

當數據改變觸發渲染層重新渲染的時候，會校正帶有 key 的組件，框架會確保他們被重新排序，而不是重新創建，以確保使組件保持自身的狀態，并且提高列表渲染時的效率。

在不使用 wx:key 的情況下, 如果 array 內的數據是動態改變的，則會不斷的重新創建每個Item對象并渲染列表，效率較低。而通過使用 wx:key ，如果array中的數據發生改變，只是將對應的對象重新排序。未發生變化的對象，不會重新創建。

使用場景

wx:key適用于動態改變的數組，對于靜態數組可用可不用。

使用方法

1. wk:key=“字符串”

wk:key="字符串"表示參與循環的某個數組array中的item的變量名，該變量的值應是列表中唯一且不發生改變的字符串或者數字。
例如下面代碼中的id是唯一且不變的，所以wx:key="id"

// js文件array:[{id: 1,name: "張三",},{id: 2,name: "李四",}]

2. wk:key="*this"

wk:key="*this"代表在for循環中的item自身，這種表示需要item本身就是一個唯一的字符串或者數字。

// xx.js data: {numberArray: [1, 2, 3, 4],stringArray:['aaa','ccc','fff','good'] } <!--xx.wxml--><input value="id:{{ item }}" wx:for="{{numberArray}}" wx:key="*this" /><input value="id:{{ item }}" wx:for="{{stringArray}}" wx:key="*this" />

---

參考文章：

微信小程序 列表渲染 wx:for 來源：w3school

微信小程序： wx:key詳解 作者：Jowney 來源：簡書

wx:key的使用及wx:key的值

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的微信小程序 wx:for的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。