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{ width: 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{ width:95%; background-color:■#fff; margin:40rpx auto; border-radius:6rpx 6rpx 0 0; font-size:28rpx; } .header{ width: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）測試結果
