Dynamically Styling CSS with Vue

by Tuan Truong

HTML

<div id="app">
  <div class="demo" @click="attachRed = !attachRed" :class="divClasses"></div>
  <div class="demo" :class="{red: attachRed}"></div>
  <div class="demo" :class="[color, {red: attachRed}]"></div>
  <hr>
  <input type="text" v-model="color">
</div>

CSS

.demo{
  margin: 10px;
  background: grey;
  display: flex;
  width: 100px;
  height: 100px;
}
.red {
  background: red;
}
.blue {
  background: blue;
}

.green {
  background: green;
}

.enlarge {
  width: 200px;
  height: 200px;
}

.shrink {
  width: 50px;
  height: 50px;
}

Vue

new Vue ({
	el: "#app",
  data: {
  	attachRed: false,
   	color: 'green'
  },
  computed: {
  	divClasses(){
    	return {
      	red: this.attachRed,
        blue: !this.attachRed
      }
    }
  }
})