[30天 Vue学好学满 DAY8] v-bind

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进行绑定