怎么在微信小程序中渲染頁面

本篇文章為大家展示了怎么在微信小程序中渲染頁面，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

條件渲染：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本身是一個唯一的字符串或數字。

上述內容就是怎么在微信小程序中渲染頁面，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。