第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

[angular4.x 快速上手]

標(biāo)簽:
AngularJS

一、修饰符作用范围

public 公有(不写修饰符,默认就是public) 可以在这个类里面也可以在类外面使用;
protected 受保护类型 只有在当前类和它的子类中可以访问;
private 私有类型 只有当前类才可以访问这个属性。

二、绑定数据

1. 数据文本绑定 {{}}

ts文件中

export class AppComponent {
  title = 'Hello Angular6.x';
}

html文件中

<h1> 
      {{title}}</h1>

效果图


webp

data_binding01.jpg

2.绑定 html

ts文件中

this.h="<h2>这是一个 h2 用[innerHTML]来解析</h2>"

html文件中,标签中的属性使用 “[]” 中括号包裹,而访问 ts 文件中的属性 不再使用 “{}” 花括号,而是 “” 双引号或者 ‘’ 单引号包裹。

<div [innerHTML]="h"></div>

效果图


webp

data_binding02.jpg

三、 数据循环 *ngFor

1、*ngFor 普通循环
  <ul> 
    <li *ngFor="let item of list"> 
      {{item}} 
    </li> 
  </ul>
2、循环的时候设置 key
<ul> 
  <li *ngFor="let item of list;let i = index;"> 
     {{item}} --{{i}} 
  </li> </ul>
3、template 循环数据
 <ul> 
    <li template="ngFor let item of list"> 
      {{item}} 
    </li> 
  </ul>

四、条件判断 *ngIf

1、使用 *ngIf
<p *ngIf="list.length > 3">这是 ngIF 判断是否显示</p>
2、使用 template
<p template="ngIf list.length > 3">这是 ngIF 判断是否显示</p>

五、执行事件 (click)=”getData()”

  <button class="button" (click)="getData()"> 
      点击按钮触发事件 
  </button> 
 
   
  <button class="button" (click)="setData()"> 
      点击按钮设置数据 
  </button>
  getData(){ /*自定义方法获取数据*/ 
    //获取 
    alert(this.msg); 
 

  } 
  setData(){ 
      //设置值 
    this.msg='这是设置的值'; 
  }

六、绑定属性

<div [id]="id" [title]="msg">调试工具看看我的属性</div>

七、表单处理

  <input type="text" (keyup)="keyUpFn($event)"/>
keyUpFn(e){ 
      console.log(e) 
  }

八、双向数据绑定

注意引入:在 app.module.ts 文件中 FormsModule

webp

image.png

使用
<input type="text"  [(ngModel)]="inputValue"/> 
 
  {{inputValue}}



作者:SEVEN_PIG
链接:https://www.jianshu.com/p/ee1eab8d2382


點(diǎn)擊查看更多內(nèi)容
TA 點(diǎn)贊

若覺(jué)得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評(píng)論
  • 收藏
  • 共同學(xué)習(xí),寫(xiě)下你的評(píng)論
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消