除了資料的操作， Vue 也還可以跟 網頁樣式 有關係，除了內容可以用 v-if 做切換，擁有會員資格的是不是也可以讓它的介面更華麗呢? 趕快來看看~

v-bind (縮寫 : )

像是 Class、Style、src ... 等屬性，都可以透過 v-bind 的綁定來做動態切換效果

Class 綁定

• 物件綁定方式

  <div v-bind:class="{ class名稱: isActive , class名稱: hasError}"></div>
  // ...
  data: {
    isActive: true,
    hasError: false
  }
  

  使用方式為 class名稱: boolean(true/false)，依照 boolean 去控制是否套用該 class

  如何給定 boolean 值?

  可以直接給 true/false ,但是就無法動態切換

  <div v-bind:class="{ class名稱: true , class名稱: false}"></div>
  

  可以給變數 操作變數的 true/false 達成動態切換

  <div v-bind:class="{ class名稱: isActive }"></div>
  // ...
  data: {
    isActive: true,
  }
  

  可以透過物件定義完畢綁上去

  <span :style="styleObject"></span>
  // ...
  data: {
      styleObject: {
          background: 'red',
          width: '150px',
          height: '150px',
      }
  }
  

• 陣列綁定方式

  <div v-bind:class="[activeClass, errorClass]"></div>
  // ...
  data: {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
  

  可以透過三元表達式切換 class

  <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
  // ...
  data: {
     isActive: false,
     activeClass: 'active',
     errorClass: 'text-danger'
  }
  
  // 就會渲染成 <div class="errorClass"></div>
  

Style 綁定

用法跟 :class 相像，不過雖然看起來像 css，其實是一個 JavaScript 對象(可以與變數及字串相加的動作)
CSS property 名稱可用 小駝峰(camelCase)或者短橫線分隔(kebab-case，記得用引號括起來) 來命名，如下列範例

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px','border-right': `2px solid ${activeColor}`}">123</div>
// ...
data: {
  activeColor: 'red',
  fontSize: 30
}

同樣可以透過物件定義完畢綁上去

<div v-bind:style="objStyle">textConent</div>
// ...
data: {
    objStyle:{
        color : 'red',
        fontSize: "30px",
        'border-right': "2px solid blue"
    }
}

如果綁定的內容太多，可運用此方式，使得模板更清晰

參考資料

Vue 官方文件