Dynamic Styles

by Megi93

HTML

<div id="app">
	<!-- basic -->
    <div class="demo" @click="attachRed = !attachRed" :class="{red: attachRed}"></div>
    <div class="demo" :class="{red: attachRed}"></div>
    <!-- using Object preko computed -->
	<div class="demo" :class="divClasses"></div>
	<!-- using names -->
	<div class="demo" :class="[color, {red: attachRed}]"></div>
	<hr>
	<input type="text" v-model="color">
</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,
		// using name
		color: "pink"
	},
	computed: {
		// svaka vrednost computed je funkcija
		divClasses: function() {
			// a on vraca objekat
			return {
				red: this.attachRed,
				blue: !this.attachRed
			}
		}
	}
})