Change Background Color In Vue.js Based On A Class Name

New to vue.js and am wondering if this is a possible outcome. I have 8 different options of a background color that I want to render based on the given class name. I can achieve th

Solution 1:

https://jsfiddle.net/kyz19b7r/

newVue({
  el: "#app",
  data: {
  	bgColour: 'blue',
    classes: [ 'blue', 'red', 'green'
    ]
  }
})

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.blue {
  background: blue;
}

.red {
  background: red;
}

.green {
  background: green;
}

<divid="app":class="bgColour"><selectv-model="bgColour"><optionv-for="myClass in classes":value="myClass">{{ myClass }}</option></select></div><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>