# 文档初探(三): 类与样式绑定

# 绑定 HTML 的类

<div :class="active: isActive"></div>

new Vue({
  el: "#app",
  data: {
    isActive: true
  }
});

1
2
3
4
5
6

如果isActive为true, 那么div的class里会出现active, 反之则没有.

当然, 我们也可以直接绑定一个对象:

<div :class="object"></div>

new Vue({
  el: "#app",
  data: {
    object: {
      isActive: true
    }
  }
});

1
2
3
4
5
6
7
8

它的实际效果和第一个例子一样.

我们还可以使用计算属性绑定类:

<div :class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject(){
    return {
      active: this.isActive && !this.error
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11

当我们要添加的类不止一个时, 我们也可以用数组的方式绑定类:

<div :class="[class1, class2]></div>

data: {
  class1: 'active',
  class2: 'text-dander'
}

// <div class="active text-danger"></div>

1
2
3
4
5
6

TIP

在组件里声明的样式和组件内联样式会合并在一起.

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

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

// <div style="color: red, fontSize: 24px"></div>

1
2
3
4
5
6

和之前的一样, 我们也可以将样式以一个对象代替:

<div :style="styleObject"></div>

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

// <div style="color: red, fontSize: 24px"></div>

1
2
3
4
5
6
7
8

计算属性也同样适用于这里, 暂时不用演示了.