SOURCE

console 命令行工具 X clear

                    
>
console
new Vue({
  el:'#app',
  data: {
    attachRed: false,
    color:'gray',
    width: 100
  },
  computed: {
    myStyle:function() {
      return {
        backgroundColor: this.color,
        width:this.width+'px'
      }
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <div
       class="demo" 
       @click="attachRed = !attacheRed"
       :class="{red:attachRed}"> </div> 
  <div class="demo" :style="myStyle"> </div>  
  <div class="demo" :style="[myStyle,{height: width + 'px'}]"> </div>  
  <hr>
  <input type="text" v-model="color">
  <input type="text" v-model="width">
</div>
.demo {
  width:100px;
  height:100px;
  background-color:gray;
  display:inline-block;
  margin:10px;
}
.red {
  background-color:red;
}
.green {
  background-color:green;
}
.blue {
  background-color:blue;
}