• 原有的class直接保留
    • 通过v-bind绑定的class会追加在原有的class后面
    • 通过对象方式绑定class，true添加，false移除
    • 通过数组方式绑定class，[ '字符串' ]，[ 变量名称 ]
      1. <div id="app">
      2. <h1 class="title" :class="[ 'active', line ]">{{ name }}</h1>
      3. <h1 class="title" :class="{ active: isActive }">{{ name }}</h1>
      4. <h1 class="title" :class="getClassArray()">{{ name }}</h1>
      5. <h1 class="title" :class="getClassObject()">{{ name }}</h1>
      6. <button @click="btnClick()">按钮</button>
      7. </div>
      1. const app = new Vue({
      2. el: "#app",
      3. data() {
      4.   return {
      5.     name: "沐颖汐",
      6.     line: "line",
      7.     isActive: true
      8.   }
      9. },
      10. methods: {
      11.   btnClick: function () {
      12.     this.isActive = !this.isActive
      13.   },
      14.   getClassArray: function () {
      15.     return [ 'active', this.line ]
      16.   },
      17.   getClassObject: function () {
      18.     return { active: this.isActive }
      19.   }
      20. }
      21. })