今天系统的记录一下wxml的数据绑定功能。吐舌头 
首先给出要用到的wxss样式文件

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}}

并在js的data中赋值↓，如message中可以直接引用，time在messageNew中赋值，引用时用.间隔，messageNew.time为数据路径。

1. Page({
2.  
3. /**
4. * 页面的初始数据
5. */
6. data: {
7. message: "简单绑定的字符串",
8. messageNew:{
9. time:"2017-10-17"
10. },
11. }
12. })

效果图↓

2.用工具查看属性，将view的id值赋为item-{{id}}

1. class="topic-group">组件属性
2. id="item-{{id}}" class="topic-item">通过工具查看属性

在js对id进行赋值

1. id: 1,

查看属性↓，点击Wxml工具，将鼠标移到左侧view上并点击，对应属性内容标蓝，可以看到，该view的id值为item-1。

3.控制属性

1. class="topic-group">控制属性
2. bindtap="switchCondition">切换condition(Click on me)
3. wx:if="{{condition}}" class="topic-item">condition为true会显示

js中我们首先将condition赋值true，并在js中实现方法

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

看下效果图，每次点击“切换condition”条目，condition值都取反，影响view的展示↓

4.三元运算

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

①我们在js中将flag赋值为5，显示如下↓（因为flag不为1，因此hidden为false，即不隐藏）

②在js中将flag赋值为1，显示如下↓（flag==1，hidden值为true，view被隐藏）

5.算数运算

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,

效果图如下，花括号包裹的部分可以进行运算，不同花括号之间的数据无法进行运算

6.逻辑运算

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赋值

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