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