Usando v-bind

by Yure Pereira

HTML

<div id="app">
  
    <select name="color" v-model="color">
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
      <option value="black">Black</option>
      <option value="white">White</option>
    </select>

  <div class="box" v-bind:class="color"></div>

</div>

CSS

.box {
   width: 200px;
   height: 200px;
   border: 1px solid #000;
   transition: all 1s;
}

.red {
  background: red;
  width: 200px;
  height: 200px;
}

.green {
  background: green;
  width: 150px;
  height: 300px;
}

.blue {
  background: blue;
  width: 100px;
  height: 50px;
}

.black {
  background: black;
  width: 100px;
  height: 200px;
}

.white {
  background: white;
  width: 150px;
  height: 250px;
}

JavaScript

var app = new Vue({
	el: '#app',
  data: {
  	color: 'red'
  }
});