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://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
<!--   <input type="text" /> -->
  <div class="demo" @click="attachRed = !attachRed" :class="{red:attachRed}"></div>
  <div class="demo" :style="{backgroundColor:color}"></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;
}