1條件渲染：

小程序：用 wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊。

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

ng2:  用 *ngIf="condition"來判斷是否需要渲染該代碼塊。
<p  *ngIf="condition">
　　　　condition is true and ngIf is true.
</p>

對於(yu) ng2, 當=號裏麵的值為(wei) 真時才渲染標簽內(nei) 的元素，為(wei) 假時將元素移除。注意：這裏是將元素從(cong) DOM樹裏麵完全移除，而不是隱藏。 對於(yu) 需要頻繁切換可見性的元素來說，改變元素的display無疑要比頻繁的移除和重新渲染高效的多。 不過，angulra2開發者認為(wei) ，在大多數 UI中，當我們(men) “關(guan) 閉”一個(ge) 組件時，在相當長時間內(nei) 都不大可能想再見到它——可能永遠也不見。 而且，當我們(men) 隱藏掉一個(ge) 元素時，組件的行為(wei) 還在繼續——它仍然附加在它所屬的 DOM 元素上， 它也仍在監聽事件。 Angular 會(hui) 繼續檢查哪些能影響數據綁定的變更。 組件原本要做的那些事情仍在繼續。 雖然不可見，組件及其各級子組件仍然占用著資源。  雖然每種方法都有各自的優(you) 點和缺點，但使用 ngIf 來移除不需要的組件通常都會(hui) 比隱藏它們(men) 更好一些。

微信小程序文檔較少，不過根據文檔中這段話：

一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運行時條件不大可能改變則 wx:if 較好

可以推測wx:if和*ngIf實質是一樣的，雖然在寫(xie) 法上有些區別，wx是將條件包裹在{{ condition }}裏麵。

2 循環列表渲染

小程序：

列表渲染：默認數組的當前項的下標變量名默認為(wei) index，數組當前項的變量名默認為(wei) item
<view wx:for="{{items}}">
　　{{index}}: {{item}}
</view>

如某個(ge) 數組為(wei) [a,b,c,d]，則對應的下標index為(wei) 0,1,2,3，對應的變量名item為(wei) a,b,c,d

使用wx:for-item可以指定數組當前元素的變量名；

使用wx:for-index可以指定數組當前下標的變量名；

如： <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
　　　　  {{idx}}: {{itemName.message}}
      </view>

則此時下標idx為(wei) 0,1,2,3, 變量名itemName為(wei) a,b,c,d

ng2:

<div *ngFor="let hero of heroes; let i=index">

　　　　{{i + 1}} - {{hero.fullName}}

</div>
ng2裏指定變量名用的是let hero of heroes，即設置變量名為(wei) hero，對應微信的 wx:for-item="itemName；
指定下標let  i=index，對應微信的wx:for-index="idx";

上麵這種寫(xie) 法實際上已經經過語法糖包裝後的寫(xie) 法，原來的寫(xie) 法太囉嗦，形似類似：

<template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
　　　　<li>...</li>
</template>

3數據綁定

微信：
數據綁定使用 Mustache 語法（雙大括號）將變量包起來
　　　　<view> {{ message }} </view>
並在js文件裏麵設置對應的變量值
Page({
　　data: {
　　　　message: 'Hello MINA!'
　　}
})

微信小程序沒有雙向數據綁定，要改變變量值時，需要通過setdata改變，監聽事件如
eventname: function(e) {
　　this.setData({
　　　　data: "im_new"
　　})
}
注意不能這樣this.data="im_new"，否則會(hui) 出錯

ng2:

ng2:

主要看一下雙向數據綁定：

<input [(ngModel)]="currentHero.firstName">

（123）表示綁定事件，[12345]表示綁定數據

通過[( )]即可實現雙向數據綁定

這是種簡寫(xie) 的形式，背後是這樣寫(xie) 的
<input
　　　　[ngModel]="currentHero.firstName"
　　　　(ngModelChange)="currentHero.firstName=$event">