前言

官方原话：

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

提取关键问题：

1. class和内联样式（style）是attribute，所以Vue可以使用v-bind处理它们，这更加灵活；

2. 除了字符串拼接的方式，还可以使用对象或者数组来处理它们。

class绑定

使用Vue指令v-bind绑定一个写好的class，然后通过按钮控制布尔变量来处理样式是否显示。

效果演示图：

---

html

<div id="app">
  <button class="show" @click="showClass">{{buttonName}}</button>
  <div v-bind:class="{active: isShow}"></div>
</div>

---

javascript

let vm = new Vue({
  el: '#app',
  data: function () {
    return {
      buttonName: '显示样式',
      isShow: false
    }
  },
  methods: {
    showClass() {
      if (this.isShow) {
        this.isShow = false
        this.buttonName = '显示样式'
      } else {
        this.isShow = true
        this.buttonName = '关闭样式'
      }
    }
  }
})

---

css

.active {
  width: 100%;
  height: 100px;
  background-color: rgb(49, 142, 204);
}

.show {
  margin-bottom: 10px;
}