小程序中--数据绑定/列表渲染/条件渲染

一、数据绑定
（1）WXML 中的动态数据均来自对应 Page 的 data。数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：
内容

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

二、列表渲染 wx:for
（1）在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{array}}" > {{index}}: {{item.message}} </view>

如果指定了变量名：

<view class="item" wx:for="{{arry1}}" wx:for-item="bb">{{bb.name}} </view>

（2）例子demo:数组循环调用：
Bali.js文件

arry2: [
{ 
jianSrc:'../../images/jian01.jpg',
name:'卢浮宫博物馆',
text1:'3243条热评',
text2:'介绍罗浮宫测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容' 
},
{ 
jianSrc: '../../images/jian02.jpg', 
name: '埃菲尔铁塔', 
text1: '2533条热评',
text2: '介绍埃菲尔铁塔测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容'
},
{ 
jianSrc: '../../images/jian03.jpg', 
name: '巴黎圣母院', 
text1: '1483条热评',
text2: '介绍巴黎圣母院测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容'
}
] 

Bali.wxml文件

<view class="container">
  <view class='title'>景点推荐</view>
  <view wx:for='{{arry2}}' class='jian-list'>
      <image src='{{item.jianSrc}}' class='jian-img'></image>
      <view><text class='name1'>{{item.name}}</text> </view>      
      <view><text class='text1'>{{item.text1}}</text></view>   
      <view> <text class='text2'>{{item.text2}}</text></view>
  </view>
</view>

三、条件渲染 wx:if
（1）在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

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

注意：一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。