小程序的數據綁定

下面舉的例子都是來自騰訊雲微信小程序解決方案中的demo

我們知道，小程序中wxml的動態數據都是綁定在Page的data里面的，

簡單綁定

數據綁定使用 Mustache 語法（雙大括號）將變量包起來，可以作用於：

Page({

    /**
     * 初始數據，我們把服務地址顯示在頁面上
     */
    data: {
        loginUrl: config.service.loginUrl,
        requestUrl: config.service.requestUrl,
        tunnelUrl: config.service.tunnelUrl,
        tunnelStatus: 'closed',
        tunnelStatusText: {
            closed: '已關閉',
            connecting: '正在連接...',
            connected: '已連接'
        }
    },
   }) 

 <view class="line">
        <text>登錄接口測試</text>
        <input type="text" value="{{loginUrl}}" disabled class="hide"></input>
        <view class="line-control">
            <view bindtap="doLogin" class="item"><view class="item-inner">登錄</view></view>
            <view bindtap="clearSession" class="item"><view class="item-inner">清除登錄會話</view></view>
 

條件渲染

假如我們需要條件來判斷是否要顯示，這個時候就要用到條件渲染

在框架中，我們用 wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊：例如

  <view wx:if="{{message.type == 'system'}}" class="system-message">
                {{message.content}}
 </view>

同理，我們也可以用wx:if和wx:else組成一段代碼塊

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

值得注意的是，{{}}內只要有值，就為true

條件渲染

wx:for

在組件上使用wx:for控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。

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

<view wx:for="{{messages}}" wx:for-item="message" wx:key="id" id="{{message.id}}" class="message 	{{message.type}}">
            <view wx:if="{{message.type == 'speak'}}" class="user-message {{message.isMe ? 'me' : 	'other'}}">
                <image class="avatar" src="{{message.user.avatarUrl}}" mode="aspectFill"></image>
                <view class="text">
                    <view class="nickname">{{message.user.nickName}}</view>
                    <view class="content">{{message.content}}</view>
                </view>
            </view>
            <view wx:if="{{message.type == 'system'}}" class="system-message">
                {{message.content}}
            </view>
</view>