Vue.js中v-bind的使用

      操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用v-bind处理它们：只需要通过表达式计算出字符串的结果即可。由于字符串拼接麻烦易错，因此Vue中表达式结果的类型除了字符串之外，还可以是对象或数组。

绑定HTML Class （v-bind:style)

 

1.对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换class：

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

data: {
  isActive: true,
  hasError: false
}

结果为:

<div class="static active"></div>

当isActive或者hasError变化时，class列表将对应的更新。另外，绑定的数据对象不必内联定义在模板里：

 

<div v-bind:class="classObject"></div>

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

结果与上面一样。我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：

 

<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

2.数组语法

把一个数组传给 v-bind:class ，以应用一个class列表：

 

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

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

也可以 使用三元表达式：

 

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

 

绑定内联样式（v-bind:style)

1.对象语法

 

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

 

2.数组语法

 

<div v-bind:style="[baseStyles, overridingStyles]"></div>