根据类名更改 vue.js 中的背景颜色

Question

vue.js 的新手，我想知道这是否是可能的结果。 我有 8 个不同的背景颜色选项，我想根据给定的类名进行渲染。 我可以用 css 实现这一点，但想知道 vue 是否有一种动态方式来实现这一点。 我的理想结果只是更改标记中的类名，然后它会呈现关联的 bg 颜色。

HTML：

<div class="page-header__container" :style="{ background: color }">
    <div class="container">
      <div class="row">
        <div class="page-header">
          <h1 class="page-header__text">
            Page Header Lorem ipsUm
          </h1>
</div>

js：

export default {
   name: 'Header',
   data() {
   return {
   color: '#333'
    };
   }
 };

css：

bg-one{
background-color: #673AB7
}
bg-two{
background-color: #7293A0
}
bg-three{
background-color: #45B69C
}

Answer 1

https://jsfiddle.net/kyz19b7r/

 new Vue({ 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; }

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