vue Class and Style

1.class

(1)基本

（2）绑定多个class

data: {
    isActive: true,
    hasError: false
}
//result

（3）绑定对象

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

（4）绑定数组

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

//如果想切换class

//也可以用对象的语法

2.style

(1)直接绑定

data: {
   activeColor: 'red',
   fontSize: 30
}

（2）绑定对象

data: {
   styleObject: {
       color: 'red',
      fontSize: '13px'
    }
}

(3)数组语法

(4)自动补全
比如transform会自动添加兼容性处理