微信小程序實戰(zhàn)系列教材：
1.微信小程序?qū)崙?zhàn)開發(fā)（一）：微信小程序簡介
2.微信小程序?qū)崙?zhàn)開發(fā)（二）：小程序基本目錄結(jié)構(gòu)講解
3.微信小程序?qū)崙?zhàn)開發(fā)（三）：小程序視圖容器（view container）
4.微信小程序?qū)崙?zhàn)開發(fā)（四）：組件的基本使用講解5.微信小程序?qū)崙?zhàn)開發(fā)(六)：渲染標簽的使用

在微信小程序里面目前只有兩種渲染標簽：條件渲染和列表渲染。

一.條件渲染
在框架中，我們用 wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊，因為 wx:if 是一個控制屬性，需要將它添加到一個標簽上，也就是view標簽上。但是如果我們想一次性判斷多個組件標簽，我們可以使用一個 <block/> 標簽將多個組件包裝起來，并在上邊使用 wx:if 控制屬性。下面我們就緊接著上節(jié)的課程案例來介紹。
.js

1. Page({
   

2.   data:{
   

3.     text:"這是的內(nèi)容",
   

4.     btnText:"這是按鈕的內(nèi)容",
   

5.   },

.wxml

1. 51小程序demo
   

2. 
   

3. 
   

4. <button type="default"  hover-class="other-button-hover"> default </button>
   

5. <button type="primary" bindtap="btnClick"> {{btnText}} </button>
   

6. 
   

7. <view wx:if="{{true}}">{{text}}</view>

復(fù)制代碼

1）.可以當if條件為true時，顯示“

這是的內(nèi)容

”，如下圖所示：

2).當if條件為false時，就不會顯示“

這是的內(nèi)容

”

，如下圖所示：

1. <view wx:if="{{false}}">{{text}}</view>

3).當然，上述實例中的true和false也可以是數(shù)據(jù)綁定格式實現(xiàn)，

所有當 wx:if 的條件值切換時，框架有一個局部渲染的過程，因為它會確保條件塊在切換時銷毀或重新渲染。

代碼和實現(xiàn)效果圖如下：

1.   data:{
   

2.     text:"這是的內(nèi)容",
   

3.     btnText:"這是按鈕的內(nèi)容",
   

4.     show :true,
   

5.   },

6. <view wx:if="{{show}}">{{text}}</view>

4).我們還可以做動態(tài)的條件渲染判斷，點擊鼠標時做條件渲染：

1.   data:{
   

2.     text:"這是的內(nèi)容",
   

3.     btnText:"這是按鈕的內(nèi)容",
   

4.     show :true,
   

5.   },

6.   btnClick: function() {
   

7.       console.log("按鈕被點擊了了...")
   

8.       var isShow = this.data.show;
   

9. 
   

10.       console.log("isShow:" + isShow)
    

11.       this.setData({text:"這是新的51小程序內(nèi)容"})
    

12.   }

編譯可以看到：

設(shè)置show:false后編譯：

5）.我們還有做一個點擊后“隱藏”--“顯示”的循環(huán)動作。

1.   btnClick: function() {
   

2.       console.log("按鈕被點擊了了...")
   

3.       var isShow = this.data.show;
   

4. 
   

5.       console.log("isShow:" + isShow)
   

6.       this.setData({text:"這是新的51小程序內(nèi)容",show:!isShow})
   

7.   }

其編譯后的顯示結(jié)果如下：

6）

也可以用 wx:elif 和 wx:else 來添加一個 else 塊，如下所示：

1. 51小程序demo
   

2. 
   

3. 
   

4. <button type="default"  hover-class="other-button-hover"> default </button>
   

5. <button type="primary" bindtap="btnClick"> {{btnText}} </button>
   

6. 
   

7. <view wx:if="{{show}}">{{text}} 1</view>
   

8. <view wx:else>{{text}} 2</view>

根據(jù)以上代碼，當我們點擊鼠標時，會循環(huán)顯示1 2我們看一下結(jié)果：

二.列表渲染
列表渲染其實就是我們常說的for循環(huán)渲染啦，用過列表數(shù)據(jù)我們可以循環(huán)顯示一堆新聞數(shù)據(jù)等，在組件上使用wx:for控制屬性綁定一個數(shù)組，即可使用數(shù)組中各項的數(shù)據(jù)重復(fù)渲染該組件。

1. <view wx:for="{{array}}">
   

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

3. </view>

1）.我們來繼續(xù)舉例查看，在之前我們的.wxml文件中新增如下代碼：

1. <view wx:for="{{['aaa','bbb','ccc']}}">
   

2. 小程序教程循環(huán)播放...
   

3. 
   

4. </view>

編譯后的結(jié)果如下圖所示：

2).同樣，列表渲染也可以用數(shù)據(jù)綁定。上述同樣的效果，用數(shù)據(jù)綁定實現(xiàn)的代碼如下：

1.   data:{
   

2.     text : "這是的內(nèi)容",
   

3.     btnText : "這是按鈕的內(nèi)容",
   

4.     show : false,
   

5.     news : ['aaa','bbb','ccc'],
   

6.   },

7. <blockquote>51小程序demo

3）問題來了，我們?nèi)绾尾拍茱@示數(shù)組里面的內(nèi)容呢？

默認數(shù)組的當前項的下標變量名默認為index，數(shù)組當前項的變量名默認為item

。所以item可以顯示數(shù)組里面的 內(nèi)容了，我們來看一下：

1. <view wx:for="{{news}}">
   

2. {{item}}
   

3. 
   

4. </view>

編譯后的顯示結(jié)果如下所示：

1. <view wx:for="{{news}}">
   

2. {{index}} : {{item}}
   

3. 
   

4. </view>

4）.如何動態(tài)的更新數(shù)組列表里面的值呢？舉例：我們設(shè)置每次點擊都會刪除數(shù)組的第一個值用shift();

1.   btnClick: function() {
   

2.       console.log("按鈕被點擊了了...")
   

3.       var isShow = this.data.show;
   

4.       var newsData = this.data.news;
   

5.       newsData.shift();
   

6. 
   

7.       console.log("isShow:" + isShow)
   

8.       this.setData({text:"這是新的51小程序內(nèi)容",show:!isShow,news:newsData})
   

9.   }

我們看一下演示效果：

本節(jié)注意：

1.在data中對show進行賦值時，不需要加雙引號。

愛盈利（aiyingli.com）移動互聯(lián)網(wǎng)最具影響力的盈利指導(dǎo)網(wǎng)站。定位于服務(wù)移動互聯(lián)網(wǎng)創(chuàng)業(yè)者，移動盈利指導(dǎo)。我們的目標是讓盈利目標清晰可見！降低門檻，讓缺乏經(jīng)驗、資金有限的個人和團隊獲得經(jīng)驗和機會，提高熱情，激發(fā)產(chǎn)品。

【轉(zhuǎn)載說明】   若上述素材出現(xiàn)侵權(quán)，請及時聯(lián)系我們刪除及進行處理：[email protected]