SOURCE

console 命令行工具 X clear

                    
>
console
new Vue({
    el: '#app',
    data: {
        attachRed: false,
        color: 'green',
        width: 150
    },
    computed: {
        divClasses: function() {
            return {
                red: this.attachRed, 
                blue: !this.attachRed
            };
        },
        myStyle: function() {
            return {
                backgroundColor: this.color,
                width: this.width + 'px'
            };
        }
    },
    methods: {

    }
}); 
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
    <div 
        class="demo" 
        @click="attachRed = !attachRed"
        :class="divClasses"></div>
    <div class="demo" :class="{red: attachRed}"></div>
    <div class="demo" :class="[color, {red: attachRed}]"></div>
    <hr>
    <input type="text" v-model="color">
    <input type="text" v-model="width">
    <hr>
    <div class="demo" :style="{backgroundColor: color}"></div>
    <div class="demo" :style="myStyle"></div>
    <hr>
    <div class="demo" :style="[myStyle, {height: width + 'px'}]"></div>
</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;
}