今天系統的記錄一下wxml的數據綁定功能。吐舌頭 
首(shou)先給出要用到的wxss樣式(shi)文件

1. /* pages/wxml/wxml.wxss */
2. .wxml-container{
3. padding: 0 20rpx ;
4. align-items: center;
5. }
6.  
7. .topic-group{
8. background: pink;
9. width: 100%;
10. text-align: center;
11. margin-top: 40rpx;
12. }
13.  
14. #text1{
15. margin-top: 0;
16. }
17.  
18. text{
19. width: 100%;
20. text-align: center;
21. }
22.  
23. .topic-item{
24. font-size: 40rpx;
25. }

1.簡單綁定，用雙花括號引用變量  簡單綁定  {{message}}  {{messageNew.time}}

并在(zai)js的(de)data中(zhong)賦值(zhi)↓，如message中(zhong)可以直接引(yin)用(yong)，time在(zai)messageNew中(zhong)賦值(zhi)，引(yin)用(yong)時用(yong).間隔，messageNew.time為數(shu)據路徑。

1. Page({
2.  
3. /**
4. * 頁面的初始數據
5. */
6. data: {
7. message: "簡單綁定的字符串",
8. messageNew:{
9. time:"2017-10-17"
10. },
11. }
12. })

效(xiao)果圖↓

2.用(yong)工具查看屬性，將view的id值賦為item-{{id}}

1. class="topic-group">組件屬性
2. id="item-{{id}}" class="topic-item">通過工具查看屬性

在(zai)js對(dui)id進(jin)行賦值

1. id: 1,

查看屬性↓，點擊(ji)Wxml工具，將鼠(shu)標移到左側(ce)view上并點擊(ji)，對(dui)應(ying)屬性內容標藍，可以(yi)看到，該(gai)view的id值為(wei)item-1。

3.控制屬性(xing)

1. class="topic-group">控制屬性
2. bindtap="switchCondition">切換condition(Click on me)
3. wx:if="{{condition}}" class="topic-item">condition為true會顯示

  js中(zhong)我們首先將condition賦值true，并(bing)在js中(zhong)實現(xian)方法

1. switchCondition: function () {
2. var condition = this.data.condition;
3. this.setData({
4. condition: !condition
5. })
6. }

看下效果圖，每次點(dian)擊“切換condition”條目，condition值都取反(fan)，影(ying)響view的展示↓

4.三元運(yun)算(suan)

1. class="topic-group">三元運算
2. hidden="{{flag==1?true:false}}" class="topic-item">flag={{flag}}

 ①我(wo)們在js中將flag賦值(zhi)為(wei)(wei)5，顯示(shi)如下↓（因為(wei)(wei)flag不(bu)為(wei)(wei)1，因此hidden為(wei)(wei)false，即不(bu)隱藏）

②在js中將flag賦值(zhi)為1，顯(xian)示如下↓（flag==1，hidden值(zhi)為true，view被隱(yin)藏）

5.算(suan)數運(yun)算(suan)

1. class="topic-group">算數運算
2. class="topic-item">{{a+b}}+{{c}}+d
3. class="topic-item">{{a+b+c}}+{{d}}

同樣在js的data中進行賦值↓

1. a: 1,
2. b: 2,
3. c: 3,
4. d: 4,

效(xiao)果圖如下，花(hua)括號包裹(guo)的部分可以進(jin)行運(yun)算，不同花(hua)括號之間的數據無(wu)法進(jin)行運(yun)算

6.邏輯運(yun)算

1. class="topic-group">邏輯判斷
2. wx:if="{{length>5}}" class="topic-item">length={{length}}
3. wx:if="{{arr.length>5}}" class="topic-item">arr.length={{arr.length}}

在js賦值(zhi)

1. length:4.5,
2. arr:[1,2,3,4,5,6],