SOURCE

console 命令行工具 X clear

                    
>
console
new Vue({
  el:"#app",
  data:{
    isCircle:false,
    color:"orange",
    width:200,
    height:100
  },
  computed:{
     divClass: function(){
     return{
     circle:this.isCircle,
     red:this.isCircle
    }
  },
    divStyle:function(){
      return{
         backgroundColor:this.color,
         width:this.width+"px",
         height:this.height+"px"
      }
    }
}
})
 <!-- data中的对象不能获取data中的数据 
-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<!--  <div class="shape" @click="isCircle=!isCircle" :class="      {circle:isCircle,red:isCircle}"></div> -->
<!-- <div class="shape" @click="isCircle=!isCircle" v-bind:class="divClass"></div> -->
<!--  <div class="shape" @click="isCircle=!isCircle":class="color"></div>
  <p>{{isCircle}}</p>
  <div class="shape" :style="{'background-color':color,width:width+'px'}"></div> 
-->
  <div class="shape" :style="divStyle"></div><br>
  <!--双向绑定数据-->
   <input type="text" v-model="color"><br>
   <input type="text" v-model="width"><br>
   <input type="text" v-model="height">
</div>
<!-- 注:
‘background-color’相当于backgroundColor
-->
.shape{
  height:100px;
  width:100px;
  background-color:pink;
  display:inline-block;
  margin:10px;
}
.circle{
  border-radius:50%;
}
.red{
  background-color:red;
}
.orange{
  background-color:orange;
}