1、数据绑定
小程序的数据绑定放弃了DOM结构，不用像html那样先获取DOM，然后再赋值给标签。小程序的数据绑定是单向的（从逻辑层(js)到UI层）
（1）简单绑定：
data: {
msg: 'hello!'
}
<view>{{msg}}</view>
（2）运算
<view>{{a+b+c}}</view>
data: {
a: 1,
b: 2,
c: 3
}
（3）数组
<view wx:for="{{[a,b,c, 1, 2, 3, 4]}}"> {{item}} </view>
data: {
a: 1,
b: 2,
c: 3
}
（4）组件的属性
初始化颜色的值并在属性中获取该值作为属性的值：
data: { num:5, color:"red" },
<view style="color:{{color}}">nihao</view>
（5）修改data属性的值的方法(不能采用传统的等号的赋值方法)
<view style="color:{{color}}">nihao</view>
<button bindtap="changecolor">点击变色</button>
changecolor(){ this.setData({ color:'yellow' }) },
data的原始color值为red，这里点击按钮的时候调用函数，将颜色修改为了yellow
data: { num:5, color:"red" },
点击按钮前：
点击按钮后：
（6）数组、对象
data: { object: { key: 'Hello ' }, array: ['MINA','TOM'] },
<view>{{object.key}} {{array[1]}}</view>
对象是以属性名和属性值的形式存储，可以用属性名获取值
数组可以通过下标获取数组的相应位置的值
2、列表渲染
（1）微信小程序中的for循环
<view wx:for="{{4}}">晚上好</view>
（2）for循环遍历数组
定义数组：
data: {
arr:[1,2,3,4]
}
绑定数组显示数组的数据：
<view wx:for="{{arr}}"> {{item}}------{{index}} </view>
item：当前值
index：当前值的下标
（3）循环的优化（block标签的应用）
VIEW方式：
定义数组：
data: { array: ['MINA','TOM','xiaoming'] },
绑定数组，显示数据：
<view wx:for="{{array}}"> <view>{{item}}------{{index}}</view> </view>
查看页面元素，有多余的view：
BLOCK方式：
<block wx:for="{{array}}"> <view>{{item}}------{{index}}</view> </block>
查看页面元素已经没有多余的view标签了：
（4）wx：key（唯一标识符，可以提高列表渲染的效率）
<block wx:for="{{array}}" wx:key="index"> <view>{{item}}------{{index}}</view> </block>
3、条件渲染
数据：
data: {
num:5
}
对数据进行判断（符合相应的条件才去渲染）：
<view wx:if="{{num > 5}}"> num大于5 </view> <view wx:elif="{{num < 5}}"> num小于5 </view> <view wx:else> num等于5 </view>
结果：
4、练习（九九乘法表）
准备数据：
data: { number:[1,2,3,4,5,6,7,8,9] },
运用循环的嵌套取出数据完成乘法表的显示：
<view wx:for="{{number}}" wx:for-item="i" class="row"><!--外层循环i,内层循环j小于等于i--> <view wx:for="{{number}}" wx:for-item="j" wx:if="{{j<=i}}" class="col"> {{i}}*{{j}}={{i*j}} </view> </view>
样式：
.row{ display:flex; justify-content: flex-start; font-size: 8px; } .col{ 11.1111%; }
测试结果：
5、练习（导航条）
（1）初始化数据：
前面的一个数组存储的是对象，作为导航栏的信息，后面的一个数组存储的是文本信息
data: { t:[{ name:"全部", sub:1 }, { name:"精华", sub:2 }, { name:"分享", sub:3 }, { name:"问答", sub:4 }, { name:"招聘", sub:5 } ], arr :['《将进酒·君不见黄河之水天上来》', ' 君不见黄河之水天上来，奔流到海不复回', ' 君不见高堂明镜悲白发，朝如青丝暮成雪。', '人生得意须尽欢，莫使金樽空对月。', '天生我材必有用，千金散尽还复来。', '烹羊宰牛且为乐，会须一饮三百杯。', '岑夫子，丹丘生，将进酒，杯莫停。', '与君歌一曲，请君为我倾耳听。', '钟鼓馔玉不足贵，但愿长醉不复醒。', '古来圣贤皆寂寞，惟有饮者留其名。', '陈王昔时宴平乐，斗酒十千恣欢谑。', '主人何为言少钱，径须沽取对君酌。', '五花马，千金裘，', '呼儿将出换美酒，与尔同销万古愁。' ], currentIndex:1 },
判断点击位置的函数：
tabchange(e){ this.setData({ currentIndex:e.currentTarget.dataset.num }) },
（2）界面
先通过列表渲染展示导航条的数据，通过判断当前点击的位置来显示不同的样式，如果某一处被点击了，就用tab 和current样式，否则只用tab，这里用三目运算符来处理
下面的一个view通过列表渲染完成数据的显示
<view clsss="main"> <view class="header"> <block wx:for="{{t}}"> <view class="tab {{currentIndex==item.sub ? 'current':''}}" bindtap="tabchange" data-num="{{item.sub}}">{{item.name}}</view> </block> </view> </view> <view wx:for="{{arr}}" class="poetry"> {{item}} </view>
（3）页面样式
.tab{ font-size: 32rpx ; color:#86C811 ; } .current{ color:#fff; background-color:#86C811; padding:6rpx 8rpx; } .main{ 95%; background-color:■#fff; margin:40rpx auto; border-radius:6rpx 6rpx 0 0; font-size:28rpx; } .header{ 100%; height:120rpx; background-color:#F6F6F6; display:flex; align-items:center; justify-content:space-around; font-size:32rpx; } .poetry{ font-size: 30rpx; background-color: #EDEFF0; }
（4）测试结果
