Vue Styling 4

by nevkatz

HTML

<script src="https://npmcdn.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="text" v-model="width">
</div>

CSS

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

.blue {
  background-color: blue;
}

JavaScript

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