v-bind 屬性綁定

將屬性綁定於 HTML 中，可綁定Data、Class、Style
v-bind: -> 可簡化為 :
好處: 定義初始值於data後，方便進行抽換

綁定一般Data

定義變數targetLink

data() {
    return {
        targetLink: "https://cn.vuejs.org/v2/guide",
    };
},

於href中綁定，也可綁定於src、組件變數

<a :href="targetLink">Go</a>

綁定Class

class 名稱: active
是否啟用: isActive
<div :class="{ active: isActive }"></div>

class 可共存，active並不會被綁定的class覆蓋

<div
  class="active"
  :class="{ 'text-info': isActive}"
></div>

定義控制綁定變數於data

data: {
    return {
      'text-info': true
    }
}

渲染結果

<div class="active text-info"></div>

定義於物件中

<div :class="classObject"></div>

定義綁定物件於data

data: {
    return {
      classObject: {
        active: true,
        'text-info': false
      }
    }
}

也可定義於計算屬性中(Computed)，透過return值進行即時計算控制。

data() {
    return {
      isActive: true,
      testValue: ''
    };
},
  
computed: {
  classObject: function () {
    return {
      active: this.isActive,
      'text-info': this.isActive && this.testValue === 'A'
    }
  }
}

定義於陣列中

<div v-bind:class="[activeClass, errorClass]"></div>

定義綁定陣列值於data

data: {
    return {
      activeClass: 'active',
      errorClass: 'text-info'
    }
}

綁定 Style

定義變數testStyle
包含 - 符號需透過雙引號或單引號包覆

data() {
    return {
      testStyle: {
        width: "150px",
        height: "100px",
        "background-color": "#46A3FF",// background-color需透過雙引號或單引號包覆
      },
    };
},

與div style進行綁定

<div :style="testStyle">

有錯誤請不吝指教!
參考資料
https://medium.com/andy%E7%9A%84%E8%B6%A3%E5%91%B3%E7%A8%8B%E5%BC%8F%E7%B7%B4%E5%8A%9F%E5%9D%8A/vue%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-%E5%9B%9B-vue%E6%8C%87%E4%BB%A4-%E4%B8%AD-v-bind-6c4fdce84879
https://cythilya.github.io/2017/04/21/vue-v-bind-class-and-style/
https://ithelp.ithome.com.tw/articles/10239781

感謝各路大神