會vue就會angular 6 - 條件與迴圈
摘要：
有不清楚的地方可以加QQ群: 142681686. 不會24小時全天問答(畢竟還有工作), 但是當你遇到問題沒地方找到答案的時候,來這裡提問一下,死馬當活馬醫萬一我看到了剛好也知道答案呢? 也不浪費你啥是不是!!
前言
這一章節咱們來把angular中的指令拿出來和vue做對比,幫助大...
有不清楚的地方可以加QQ群: 142681686. 不會24小時全天問答(畢竟還有工作), 但是當你遇到問題沒地方找到答案的時候,來這裡提問一下,死馬當活馬醫萬一我看到了剛好也知道答案呢? 也不浪費你啥是不是!!
前言
這一章節咱們來把angular中的指令拿出來和vue做對比,幫助大家掌握angular指令的使用
正文
條件渲染: ngIf
在angular通過*ngIf指令控制一個元素顯示與否,如:
<p *ngIf="seen">現在你看到我了</p>
import { Component } from '@angular/core';
@Component({
selector: 'app-welcome',
templateUrl: './welcome.html',
styleUrls: ['./welcome.css'],
})
export class WelcomeComponent {
public seen = true;
}
angular中如何通過else顯示另外一個模版呢?
<p *ngIf="seen; else elseBlock">現在為真</p> <ng-template #elseBlock><p>現在為假</p></ng-template>
這裡的ng-template標籤和vue中的template標籤一樣, 用於定義模板,在渲染的過程中並不會生成什麼東西.
在angular中怎麼實現類似於VUE中的多選擇呢?
<div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div>
我建議你現在使用,如下結構實現:
<div *ngIf="type === 'A'"> A </div> <div *ngIf="type === 'B'"> B </div> <div *ngIf="type === 'C'"> C </div> <div *ngIf="type !== 'A' && type !== 'B' && type !== 'C'"> Not A/B/C </div>
看起來好像不是那麼優雅是不是? 但是這樣確實滿足了咱們的需求不是嗎? 以後咱們還會介紹其他的通過程式設計的方式來控制元素的顯示, 但是對於咱們剛入門的來說, 現在的是最好理解的方式.
經過之前的修改後咱們的welcome元件現在長成這個樣子:
welcome.html
<h2 (click)="clickHandler($event)">你好, 歡迎來到{{ name }}!</h2>
<div *ngIf="active === 1">
A
</div>
<div *ngIf="active === 2">
B
</div>
<div *ngIf="active === 3">
C
</div>
<div *ngIf="active !== 1 && active !== 2 && active !== 3">
Not A/B/C
</div>
welcome.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-welcome',
templateUrl: './welcome.html',
styleUrls: ['./welcome.css'],
})
export class WelcomeComponent {
public name = 'Angular';
private active = 1;
clickHandler() {
this.active++;
}
}
迴圈渲染: ngFor
在angular中迴圈渲染和vue是十分相似的,vue中是這樣的:
<div id="app-4">
<ol>
<li v-for="(todo, index) in todos">
{{ todo.text }} {{ index }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '學習 JavaScript' },
{ text: '學習 Vue' },
{ text: '整個牛專案' }
]
}
})
那麼angular中是怎麼樣的呢?
welcome.html
<h2 (click)="clickHandler($event)">你好, 歡迎來到{{ name }}!</h2>
<div *ngIf="active === 1">
A
</div>
<div *ngIf="active === 2">
B
</div>
<div *ngIf="active === 3">
C
</div>
<div *ngIf="active !== 1 && active !== 2 && active !== 3">
Not A/B/C
</div>
<ol>
<li *ngFor="let todo of todos; let i = index">
{{ todo.text }} {{ i }}
</li>
</ol>
welcome.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-welcome',
templateUrl: './welcome.html',
styleUrls: ['./welcome.css'],
})
export class WelcomeComponent {
public name = 'Angular';
private active = 1;
public todos = [
{ text: '學習 JavaScript' },
{ text: '學習 Vue' },
{ text: '整個牛專案' }
];
clickHandler() {
this.active++;
}
}
是不是基本上一樣呢,對的, 其實你會VUE就會angular!!
最後
看了這些後是不是對學會angular的信心更足了呢? 對的, 其實angular沒有網上說的這樣難, 那樣難; 難的不是angular,而是你決定學習angular的心.