1.动态切换class对象写法

  <div id="box">
    <div :class="classobj">动态切换class-1-对象写法</div>
  </div>

  <script>
    var vm = new Vue({
      el:'#box',
      data:{
        classobj:{
          aa:true,
          bb:true,
          cc:false
        }
      }
    })

  </script>

true表示class中有这个属性，false表示没有

直接在对象中添加属性是拦截不到的。

解决方案：Vue.set（对象，属性，值）来设置。

2.动态切换class数组写法

  <div id="box">
    <div :class="classarr">动态切换class-2-数组写法</div>
  </div>

  <script>
    var vm = new Vue({
      el:'#box',
      data:{
        classarr:["aa","bb"]
      }
    })
  </script>

 数组中的元素会被添加在class中。

后期新增的话，只要往数组中添加新的元素即可。