Dynamic CSS Vue

by Megi93

HTML

<div id="app">
    <div 
    class="demo" 
    v-on:click="attachRed = !attachRed" 	
    v-bind:class="divClasses"></div>
    <div class="demo" v-bind:class="{red: attachRed}"></div>
    <div class="demo"></div>
</div>

CSS

.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;
}

JavaScript

new Vue({
    el: '#app',
    data: {
        attachRed: false
    },
	computed: {
		divClasses: function() {
			return {
				red: this.attachRed,
				blue: !this.attachRed
			}
		}
	}
});