Dynamic CSS Vue - basic

by Megi93

HTML

<div id="app">
	<!-- by click toggle class -->
	<div class="demo" @click="attachRed = !attachRed" :class="{red: attachRed}"></div>
	<div class="demo" :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;
}

.pink {
    background-color: pink;
}

JavaScript

new Vue ({
	el: '#app',
	data: {
		attachRed: false 
	}
});