小程序的數據綁定

小程序的數據綁定

下面舉的例子都是來自騰訊雲微信小程序解決方案中的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>