ページ内のコンポーネントと機能で作成された ForComp を例に挙げます。
機能.json
{
"usingComponents": {
"if-comp":"/components/IfComp/IfComp",
"for-comp":"/components/ForComp/ForComp"
},
"navigationBarTitleText": "语法特点",
"navigationBarBackgroundColor": "#FFF",
"navigationBarTextStyle": "black"
}機能.wxml
<view>===========条件渲染=============</view>
<if-comp />
<view>===========循环遍历=============</view>
<for-comp />
Comp.js 用
Component({
data:{
list:["a","b","c"],
stuList:[
{id:1,name:"zhang",score:90},
{id:2,name:"li",score:80},
{id:3,name:"wang",score:70},
]
}
})Comp.wxml 用
<view>--------使用默认索引、元素-------</view>
<view wx:for="{
{list}}" wx:key="*this">
索引:{
{index}} 元素:{
{item}}
</view>
<view>--------自定义索引、元素-------</view>
<view wx:for="{
{list}}" wx:key="*this" wx:for-index="idx" wx:for-item="v">
索引:{
{idx}} 元素:{
{v}}
</view>
<view wx:for="{
{stuList}}" wx:key="id">
索引:{
{index}} 元素:{
{item.id}} {
{item.name}} {
{item.score}}
</view>
緑色のボックスの ws:key="" に注目してください。 リスト レンダリング | WeChat オープン ドキュメント (qq.com)を参照してください。
簡単に言えば、走査する必要のあるリストが単一の文字列、ブール値などで構成されている場合は、*this を使用するだけです。ただし、リストが配列で構成されている場合、キーは一意の特徴を選択する必要があります。たとえば、上記の stuList の例では、このリストは複数の学生情報で構成されており、1 つの要素には学生の学生番号、名前、成績が含まれています。名前と成績は繰り返される可能性がありますが、学生 ID は繰り返されないため、id がキーとして選択されます。
実行結果
