條件判斷 wx:if

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

 True  1  2  3 

block wx:if

因為 wx:if 是一個控制屬性，需要將它添加到一個標簽上。如果要一次性判斷多個組件標簽，可以使用一個 標簽將多個組件包裝起來，并在上邊使用 wx:if 控制屬性。

   view1    view2 

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

循環控制 wx:for

在組件上使用 wx:for 控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。
默認數組的當前項的下標變量名默認為 index，數組當前項的變量名默認為 item

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

使用 wx:for-item 可以指定數組當前元素的變量名，
使用 wx:for-index 可以指定數組當前下標的變量名：

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

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

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

wx:key

如果列表中項目的位置會動態改變或者有新的項目添加到列表中，并且希望列表中的項目保持自己的特征和狀態（如<input /> 中的輸入內容，<switch> 的選中狀態），需要使用 wx:key 來指定列表中項目的唯一的標識符<switch>。

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

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

顯示效果：