微信小程序頁面渲染

條件渲染：wx:if, wx:elif, wx:else

<view wx:if="{{list.length > 5}}" >1</view>
<view wx:elif="{{list.length > 2}}">2</view> 
<view wx:else>3</view>

 由於wx:if是一個控制屬性，需要將它添加到一個標簽上，如果要一次性判斷多個組件標簽，可以使用<block></block>標簽將多個組件包裝起來，並在上邊使用wx:if 控制屬性，

<block>
<view wx:if="{{list.length > 5}}" >1</view>
<view wx:elif="{{list.length > 2}}">2</view> 
<view wx:else>3</view>
</block>

 blcok 是一個包裝元素，不會在頁面做任何渲染。

 

hidhen：

在小程序中，hidden = "{{condition}}" 也能控制元素的顯示和隱藏。為true隱藏，為false顯示

<view hidden = "{{condition}}" >123</view>

 

---

 

列表渲染： wx:for

如果沒有指定參數, 默認索引是index, 值是item

<view wx:for="{{userList}}" wx:key="index">索引是： {{index}}, 值是： {{item}}</view>

 data: {
    userList :['zhangsan', "lisi", 'wnagwu']
  }

手動指定索引和當前項的變量名： 

<view wx:for="{{userList}}" wx:key="index" wx:for-index="i" wx:for-item="it">
  索引是： {{i}}, 值是： {{it}}
</view>

data: {
    userList :['zhangsan', "lisi", 'wnagwu']
  }

 block wx:for 列表渲染

<block wx:for="{{userList}}" wx:key="index" wx:for-index="i" wx:for-item="it">
  <view>索引是： {{i}}, 值是： {{it}}</view>
</block>

 

---

 

key 在列表循環中的作用：

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

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

key值的注意點：

key值必須具有唯一行，且不能動態改變。

key的值必須是數字或字符串

保留關鍵子*this代表在for循環中的item本身，它也可以充當key值，但是有以下限制，需要item本身是一個唯一的字符串或數字。