條件判斷 wx:if

在微信小程序的視圖層（wxml）文件中可以使用條件判斷，動(dòng)態(tài)的顯示一個(gè)組件或者執(zhí)行另外的渲染試圖。使用wx:if="{{condition}}" 來(lái)判斷是否需要渲染該代碼塊，也可以用 wx:elif 和 wx:else 來(lái)添加一個(gè) else 塊：

 True  1  2  3 

block wx:if

因?yàn)?wx:if 是一個(gè)控制屬性，需要將它添加到一個(gè)標(biāo)簽上。如果要一次性判斷多個(gè)組件標(biāo)簽，可以使用一個(gè) 標(biāo)簽將多個(gè)組件包裝起來(lái)，并在上邊使用 wx:if 控制屬性。

   view1    view2 

注意： 并不是一個(gè)組件，它僅僅是一個(gè)包裝元素，不會(huì)在頁(yè)面中做任何渲染，只接受控制屬性。

循環(huán)控制 wx:for

在組件上使用 wx:for 控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。
默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為 index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為 item

  {{index}}: {{item.message}}

使用 wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名，
使用 wx:for-index 可以指定數(shù)組當(dāng)前下標(biāo)的變量名：

  {{idx}}: {{itemName.message}}

wx:for 也可以嵌套，下邊是一個(gè)九九乘法表

            {{i}} * {{j}} = {{i * j}}      

wx:key

如果列表中項(xiàng)目的位置會(huì)動(dòng)態(tài)改變或者有新的項(xiàng)目添加到列表中，并且希望列表中的項(xiàng)目保持自己的特征和狀態(tài)（如<input /> 中的輸入內(nèi)容，<switch> 的選中狀態(tài)），需要使用 wx:key 來(lái)指定列表中項(xiàng)目的唯一的標(biāo)識(shí)符<switch>。

wx:key 的值以兩種形式提供

當(dāng)數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時(shí)候，會(huì)校正帶有 key 的組件，框架會(huì)確保他們被重新排序，而不是重新創(chuàng)建，以確保使組件保持自身的狀態(tài)，并且提高列表渲染時(shí)的效率。

顯示效果：