個人 Vue.js 學習日記 （四） - v-bind:class / style 用法

上節回顧

上回看了模板語法、計算屬性與監聽器，今天繼續往下看。

v-bind 與 class

v-bind:class有 4 種方式，分別是：
1.內聯

<h3 v-bind:class="{ active : isActive,'text-danger' : hasError }">i am a h3</h3>

2.數據對象

<h3 v-bind:class="classDataObject">i am a h3</h3>

3.計算屬性

<h3 v-bind:class="classComputedObject">i am a h3</h3>

4.數組

<h3 v-bind:class="[isActive, hasError]">i am a h3</h3>

不管是哪一種方式綁定，依據都是同樣的，表達式成立就輸出，不成立就不輸出

內聯輸出結果：

<h3 class="active">i am a h3</h3>

tip:能夠經過在瀏覽器控制檯修改app.hasError的值來觀察h3標籤class的變化

tip：組件中一樣適用該綁定方式

v-bind 與 style

綁定style與綁定class基本同樣：

1. 內聯
2. 數據對象
3. 計算屬性
4. 數組

均可以，例如綁定計算屬性：

html:

<tr v-bind:style="size">

data:

data: { fontSize: 'fontSize: 20px;'}

computed:

computed:{
  size: function () {
    return this.fontSize
  }
}

輸出：

<tr style="font-size: 20px;"></tr>

tip：有提到綁定瀏覽器引擎前綴的CSS屬性時，vue會自動添加

小節

綁定class應該是很經常使用的一個指令，須要一些練習熟練掌握。

近些天身體有點不太好，等好了以後把拖拉的補回來。