SOURCE

new Vue({
  el:'#app',
  
//   有一点需要注意，data里面的数据不能互相访问到？！所以只能使用计算属性来定义这个函数
  data:{
    isCircle:false,
    color:"blue"
  },
  
  computed:{
    
    divClass:function(){
      return {
         circle:this.isCircle
      }
    },
    
    divStyle:function(){
      return{
      	backgroundColor: 'red'
      }
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
   <!--v-bind:class可以传递一个对象，对象中属性的值为真时，这个类就会被添加进去。因为是一个对象，所以理所应当里面可以放很多个类。通过定义类的形式动态添加了样式-->
  <!--但是下面这种写法不好，当这个对象中属性很多的时候，会大大影响代码的可读性，应该把这个数据对象写到js中-->
  <!-- <div class="shape" @click='isCircle = !isCircle' :class="{ circle:isCircle} "></div> -->
  
  <!--把对象放到js中，通过计算属性来对类作修改-->
  <!-- <div class="shape" @click='isCircle = !isCircle' :class='divClass'></div> -->
  
  <!-- 也可以直接绑定一个数据 -->
 <!--  <div class="shape" @click='isCircle = !isCircle' :class='color'></div> -->
  
    <!-- 或者混合绑定数据和对象 -->
    <!-- <div class="shape" @click='isCircle = !isCircle' :class='[color,{circle:isCircle}]'></div>  -->
  
  <!-- 除了绑定class之外，还可以绑定style属性，绑定style与绑定class一样，可以用数组的形式传递多个对象 -->
   <div class="shape" :style='divStyle'></div> 
  
  
  <p>{{ isCircle }}</p>
</div>

.shape{
  background-color:#999;
  height:100px;
  width:100px;
  display:inline-block;
}

.circle{
  border-radius:50%;
}

.blue{
  background-color:blue;
}