Setting Styles Dinamically without CSS Classes

by Megi93

HTML

<div id="app">
	<div class="demo" :style="{backgroundColor:color}"></div>
	<div class="demo" :style="myStyle"></div>
	<div class="demo"></div>
	<hr>
	<input type="text" v-model="color" placeholder="color">
	<input type="text" v-model="width" placeholder="width">
</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: {
		color: 'gray',
		width: 100
	},
	computed: {
		myStyle: function() {
			return {
				backgroundColor: this.color,
				width: this.width + 'px'
			}	
		}
	}
})