vue的class与style

本文参考了vuejs的官方文档，结合自己的理解整理而成的读书笔记！

将 v-bind 用于 class 和 style 时，表达式结果的类型除了字符串之外，还可以是对象或数组

对象语法

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

// 这里的类名是'active'，由变量isActive的真假来控制
// 还有普通的class属性，类名为static
// 当对于的类名的变量值发生变化时，div的class值也会响应式的发生变化

// 绑定的数据对象不必内联定义在模板里
<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    // 由于'text-danger'不是正确的标识符的写法，所以需要加上引号，推荐都加上引号
    'text-danger': false
  }
}

// 也可以在绑定一个返回对象的计算属性
<div v-bind:class="classObject"></div>
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      // 对于表达式相对复杂的情况下或者class依赖的变量比较多，推荐使用计算属性的写法，条理清晰且便于维护
      active: this.isActive && !this.error,
      'text text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

数组语法

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

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}
// 这里'active'类的显示由表达式控制，而'text-danger'是一直存在的，所以推荐下面这样写
<div v-bind:class="[isActive ? activeClass : '']" class='text-danger'></div>

// 当有多个条件来控制'active'类的显示时，表达式无疑会很复杂，这样我觉得还不如直接用对象语法结合计算属性来的优雅

用在组件上

当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

<my-component class="baz boo"></my-component>

// 将会被渲染成'foo bar baz boo'，p标签原有的'foo bar'类名不会被覆盖
<p class="foo bar baz boo">Hi</p>

自动添加前缀

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀

绑定内联样式-对象语法

行类样式最好也是对象语法计算属性使用，行类样式的一大好处是权重比class的高

<div v-bind:style="styleObject"></div>

computed: {
  styleObject() {
    return {
      color: 'red',
      fontSize: '13px'
    }
  }
}