Vue Dynamic styling by class

<style type="text/css">
	.demo{
		width: 200px;
		height: 200px;
		border: 1px solid grey;
		margin: 20px;
	}
	.red{
		background-color: red;
	}
	.blue{
		background-color: blue;
	}
</style>

	<div id="app">
		<div class="demo" @click="attachedRed =! attachedRed" :class="{ red: attachedRed }"> Click here</div>
		<div class="demo" :class="{ red: attachedRed }"></div>
		<div class="demo"></div>
	</div>

<script type="text/javascript">
	new Vue({
		el: "#app",
		data: {
			attachedRed : false
		}

	});
</script>

Demo http://vue.toihid.com/section-2/vue_dynamic_style_by_class.php