无码日韩精品无码国产_一级做a爰片久久毛片潮喷_国产欧美国日产_久久9热re这里只有国产中文精品6_每天将为您更新成人影视在线看免费观看

1條件渲染：

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

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

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

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

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

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

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

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

小程序：

列表渲染：默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為item
<view wx:for="{{items}}">
　　{{index}}: {{item}}
</view>

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

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

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

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

則此時(shí)下標(biāo)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，對(duì)應(yīng)微信的 wx:for-item="itemName；
指定下標(biāo)let  i=index，對(duì)應(yīng)微信的wx:for-index="idx";

上面這種寫(xiě)法實(shí)際上已經(jīng)經(jīng)過(guò)語(yǔ)法糖包裝后的寫(xiě)法，原來(lái)的寫(xiě)法太啰嗦，形似類(lèi)似：

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

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

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

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

ng2:

ng2:

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

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

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

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

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