成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Angular4學(xué)習(xí)筆記之HTML屬性綁定

wawor4827 / 1570人閱讀

摘要：第二種情況控制樣式如果的值為那么樣式就是，否則就是寫(xiě)在最后對(duì)于的屬性綁定和的屬性綁定是一樣一樣的。對(duì)于文章中所用的代碼是結(jié)合了學(xué)習(xí)筆記之?dāng)?shù)據(jù)綁定上面的例子做的，鏈接地址

簡(jiǎn)介

基本HTML屬性

Css 類(lèi)綁定



CSS 類(lèi)綁定，[class] 全部替換的例子

 
 

CSS 類(lèi)綁定，[class.sepcial] 部分替換的例子

 


CSS 類(lèi)綁定，[ngClass] 替換多個(gè)的例子

Style 屬性綁定
HTML屬性綁定 
Something
tableColspan 是一個(gè)表達(dá)式，當(dāng)界面在渲染的時(shí)候會(huì)將 tableColspan的值綁定到 attr后面的 colspan 上面去

修改 bind.component.html




  
[attr.colspan] 例子：

  

    

      跨列的例子
    

    

      單元格1
      單元格1

圖示：

Css 類(lèi)綁定 第一種情況 
[calss]
someExpression 的值會(huì)完全替換掉 class的值。

修改 bind.component.css

.a{background-color: #A7A9AE;}

.b{color: #488aff;}

.c{font-size: 1rem;}

修改bind.component.html




  
CSS 類(lèi)綁定例子1：[class]

  
CSS 類(lèi)綁定，[class] 全部替換的例子

修改 bind.component.ts

divClass: string;

constructor() {
   //在3秒鐘之后將樣式設(shè)置為 " a b c "
  setInterval(()=>{
    this.divClass = "a b c";
  }, 3000)
}

圖示：

第二種情況 
[calss.special]
isSpecial 是一個(gè) boolean，當(dāng) isSpecial 為 true 的時(shí)候會(huì)出現(xiàn) special 的值，為 false的時(shí)候不會(huì)出現(xiàn)。

修改bind.component.html



CSS 類(lèi)綁定，[class.sepcial] 部分替換的例子

修改 bind.component.ts

divClass: string;
isSpcial: boolean = false;

constructor() {

  setInterval(()=>{
    this.divClass = "a b c";
    
    //在 3秒鐘之后顯示樣式
    this.isSpcial = true;
  }, 3000)
}

圖示：

第三種情況 
[ngClass]="{aaa:isA, bbb: isB}"
aaa 是指標(biāo)簽上面class 的屬性值，isA 就boolean， 只有當(dāng) isA 為 true 的時(shí)候才會(huì)顯示 aaa 屬性。 同理，bbb 也是一樣。

修改bind.component.html



CSS 類(lèi)綁定，[ngClass] 替換多個(gè)的例子

修改 bind.component.ts

divClass: string;
isSpcial: boolean = false;

isA: boolean = false;
isB: boolean = false;


constructor() {

  setInterval(()=>{
    this.divClass = "a b c";
    this.isSpcial = true;

    this.isA = true
    this.isB = true
  }, 3000)
}

圖示：

Style 屬性綁定

第一種情況

[style.color] = "isSpecial ? "red" : "green" "
控制 style樣式的 color, 如果 isSpecial 的值為true，那么color的屬性為 red。

第二種情況

[ngStyle]= "{"font-style" : this.canSave ? "italic" : "normal" }"
控制樣式 font-style 如果 this.canSave 的值為 trur 那么樣式就是 italic， 否則就是 normal
寫(xiě)在最后 
1.對(duì)于Style的屬性綁定和 class 的屬性綁定是一樣一樣的。
2.對(duì)于文章中所用的代碼是結(jié)合了 Angular2學(xué)習(xí)筆記之?dāng)?shù)據(jù)綁定上面的例子做的，
  鏈接地址：https://segmentfault.com/a/1190000012674948

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90637.html

相關(guān)文章

  • Angular4學(xué)習(xí)筆記之DOM屬性綁定

    摘要：如果沒(méi)有，請(qǐng)查看學(xué)習(xí)筆記之安裝和使用教程事件綁定準(zhǔn)備工作了解目的在模版的界面上面增加一個(gè)按鈕，然后通過(guò)小括號(hào)綁定一個(gè)事件。 簡(jiǎn)介 使用插值表達(dá)式將一個(gè)表達(dá)式的值顯示在模版上 {{productTitle}} 使用方括號(hào)將HTML標(biāo)簽的一個(gè)屬性值綁定到一個(gè)表達(dá)式上 使用小括號(hào)將組件控制器的一個(gè)方法綁定到模版上面的一個(gè)事件的處理器上 按鈕綁定事件 注意 在開(kāi)始下面的例子之前，請(qǐng)先確認(rèn)已...

    Genng 評(píng)論0 收藏0

  • Angular4學(xué)習(xí)筆記——數(shù)據(jù)綁定

    摘要：所以，在的世界中，唯一的作用是用來(lái)初始化元素和指令的狀態(tài)。當(dāng)進(jìn)行數(shù)據(jù)綁定時(shí)，只是在與元素和指令的和事件打交道，而就基本上靠邊站了，只有比較特殊的情況才會(huì)用到他。事件綁定事件名事件綁定分為對(duì)原生事件綁定和自定義事件綁定。 數(shù)據(jù)綁定總體而言有三種類(lèi)型： {{...}} 插值表達(dá)式綁定 屬性綁定（包括property和attitude 事件綁定 插值表達(dá)式綁定 既可以寫(xiě)在html結(jié)構(gòu)中，...

    MRZYD 評(píng)論0 收藏0

  • Angular4學(xué)習(xí)筆記——組件之間的交互

    摘要：具體思路子組件暴露一個(gè)屬性，當(dāng)事件發(fā)生時(shí)，子組件利用該屬性向上彈射事件。父組件綁定到這個(gè)事件屬性，并在事件發(fā)生時(shí)作出回應(yīng)。這個(gè)組件子樹(shù)之外的組件將無(wú)法訪問(wèn)該服務(wù)或者與它們通訊。父子組件通過(guò)各自的構(gòu)造函數(shù)注入該服務(wù)。 通過(guò)輸入型綁定把數(shù)據(jù)從父組件傳到子組件 Angular對(duì)于父組件 => 子組件的數(shù)據(jù)通信做法和Vue很相似。 // 父組件html模板 // 子組件接收數(shù)據(jù) i...

    Guakin_Huang 評(píng)論0 收藏0

  • Angular4學(xué)習(xí)筆記——生命周期鉤子

    摘要：所以如果需要使用生命周期，只要在我們的代碼中寫(xiě)上鉤子函數(shù)即可，會(huì)找到并調(diào)用像這樣的鉤子方法，有沒(méi)有接口無(wú)所謂。當(dāng)使用構(gòu)造函數(shù)新建一個(gè)組件或指令后，就會(huì)按下面的順序在特定時(shí)刻調(diào)用這些生命周期鉤子方法用處當(dāng)設(shè)置數(shù)據(jù)綁定輸入屬性發(fā)生變化時(shí)響應(yīng)。 接口和鉤子 在介紹生命周期的相關(guān)概念之前，可以先復(fù)習(xí)一下TypeScript對(duì)于接口的概念。 在這里主要使用的是類(lèi)接口及其實(shí)現(xiàn)： interf...

    fizz 評(píng)論0 收藏0

  • 前端框架這么多，該如何抉擇？

    摘要：在引起狀態(tài)變化的時(shí)刻，框架自動(dòng)觸發(fā)臟檢查，也可以手動(dòng)執(zhí)行臟檢查，直接操作更新視圖。最后，說(shuō)了這么多，大家在具體選型時(shí)還是要首先分析自己的需求和現(xiàn)狀，然后再做選擇。 作為一個(gè)軟件開(kāi)發(fā)者，最大的挑戰(zhàn)就是在不斷涌現(xiàn)的新技術(shù)中進(jìn)行取舍，持續(xù)學(xué)習(xí)是從事這一行業(yè)的必備技能。在這個(gè)領(lǐng)域里，技術(shù)更新最快地又非前端莫屬了。各種框架的出現(xiàn)、版本的更新此起彼伏，呈現(xiàn)出一派欣欣向榮之景。 在項(xiàng)目中必不可少的便...

    Jackwoo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<