对象语法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      color: silver;
    }

  </style>
</head>
<body>

<script src="../vue.js"></script>
<div id="app">
<!--  <h2 class="active">{{message}}</h2>-->
<!--  <h2 :class="active">{{message}}</h2>-->
<!--  <h2 v-bind:class="{类名:value1,类名2:value2}">{{message}}</h2>-->
  <h2 v-bind:class="{active:true,line:false}">{{message}}</h2>
  <h2 v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
  <h2 v-bind:class="getClasses()">{{message}}</h2>
<!--我认为不加括号是死绑，加括号是活绑-->
  <button v-on:click="btnClick">button</button>

</div>
<script>
  const vm = new Vue({

    el : '#app',
    data:{
      message:'hello',
      active:'active',//style中的active
      isActive:"true",
      isLine:'true',
      imgUrl:'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
    },
    methods:{
      btnClick:function () {
            this.isActive=!this.isActive
      },
      getClasses:function () {
           return {active:this.isActive,line:this.isLine}
      }
    }


  })

</script>
</body>
</html>

数组语法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      color: silver;
    }

  </style>
</head>
<body>

<script src="../vue.js"></script>
<div id="app">
<!--  <h2 class="active">{{message}}</h2>-->
<!--  <h2 :class="active">{{message}}</h2>-->
<!--  <h2 v-bind:class="{类名:value1,类名2:value2}">{{message}}</h2>-->
  <h2 v-bind:class="{active:true,line:false}">{{message}}</h2>
  <h2 v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
  <h2 v-bind:class="getClasses()">{{message}}</h2>
<!--我认为不加括号是死绑，加括号是活绑-->
  <button v-on:click="btnClick">button</button>

</div>
<script>
  const vm = new Vue({

    el : '#app',
    data:{
      message:'hello',
      active:'active',//style中的active
      isActive:"true",
      isLine:'true',
      imgUrl:'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
    },
    methods:{
      btnClick:function () {
            this.isActive=!this.isActive
      },
      getClasses:function () {
           return {active:this.isActive,line:this.isLine}
      }
    }


  })

</script>
</body>
</html>