VUE绑定class的几种方式

<template>
  <div id="app">
    <!-- 绑定class的几种方式 -->
    <div :class="{'active':isActive}">hello world</div>
    <div class="static" :class="{'active':isActive,'error':isError}">可与class共存,可放多个class</div>
    <div :class="classes">绑定计算属性</div>
    <div :class="[activeCls,errorCls]">数组语法</div>
    <div :class="[isActive?activeCls:'',errorCls]">三元表达式</div>
    <div :class="[{'active':isActive},errorCls]">混合使用</div>
    <button :class="btnClasses">绑定计算属性</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: function () {
    return {
      isActive: true,
      isError: true,
      error: {
        type: 'fail'
      },
      activeCls: 'active',
      errorCls: 'error',
      size: 'large',
      disabled: true
    }
  },
  methods: {
  },
  computed: {
    classes: function () {
      return {
        active: this.isActive && !this.error,
        'text-fail': this.error && this.error.type === 'fail'
      }
    },
    btnClasses: function () {
      return [
        'btn',
        {
          ['btn-' + this.size]: this.size !== '',
          'btn-disabled': this.disabled
        }
      ]
    }
  }
}
</script>