小程序的数据绑定

小程序的数据绑定

下面举的例子都是来自腾讯云微信小程序解决方案中的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>