Vue学习笔记——2.Class 与 Style 绑定

1.绑定HTML Class

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

<div v-bind:class="{ active: isActive }"></div>

上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的值

你可以在对象中传入更多字段来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class attribute 共存。

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

绑定的数据对象不必内联定义在模板里：

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

<!--vue中的代码段-->
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

同时也可以放在计算属性中，搭配约定的计算表达式

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

数组语法

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

<div v-bind:class="[activeClass, errorClass]"></div>
<!--vue中的代码段-->
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

如果你也想根据条件切换列表中的 class，可以用三元表达式：

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

用在组件上

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

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

然后在使用它的时候添加一些 class：

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

HTML 将被渲染为：

<p class="foo bar baz boo">Hi</p>

对于带数据绑定 class 也同样适用：

<my-component v-bind:class="{ active: isActive }"></my-component>

当 isActive 为 true 时，HTML 将被渲染成为：

<p class="foo bar active">Hi</p>

2.绑定内联样式

此处暂时省略…