vue.js - Styling Elements with the array Syntax

by Rodwyn Moreno

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <div class="demo" :style="{backgroundColor: color}"></div>
  <div class="demo" :style="myStyle"></div>
  <div class="demo" :style="[myStyle, {height: width + 'px'}]"></div>
  <hr />
  <input type="text" v-model="color" />
  <input type="number" v-model="width" />
</div>

CSS

.demo {
  width: 100px;
  height: 100px;
  background-color: gray;
  display: inline-block;
  margin: 10px;
}

JavaScript

new Vue({
	el: '#app',
  data: {
    color: 'gray',
    width: 100
  },
  computed: {
  	myStyle: function() {
    	return {
      	backgroundColor: this.color,
        width:this.width + 'px'
      };
    }
  }
});