欧美综合影院在线影院,国产精品女人久久久久久,日韩精品无码去免费专区,樱花草在线社区WWW日本影院

1條件渲染：

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

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

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

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

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

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

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

2 循環(huán)列表渲染

小程序：

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

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

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

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

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

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

ng2:

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

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

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

上面這種寫法實際上已經(jīng)經(jīng)過語法糖包裝后的寫法，原來的寫法太啰嗦，形似類似：

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

3數(shù)據(jù)綁定

微信：
數(shù)據(jù)綁定使用 Mustache 語法（雙大括號）將變量包起來
　　　　<view> {{ message }} </view>
并在js文件里面設(shè)置對應(yīng)的變量值
Page({
　　data: {
　　　　message: 'Hello MINA!'
　　}
})

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

ng2:

ng2:

主要看一下雙向數(shù)據(jù)綁定：

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

（123）表示綁定事件，[12345]表示綁定數(shù)據(jù)

通過[( )]即可實現(xiàn)雙向數(shù)據(jù)綁定

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