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

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>

css:

newvue({
el:“应用程序”，
数据：{
颜色：“蓝色”，
类别：[“蓝色”、“红色”、“绿色”
]
}
})

正文{
背景：#fff；
填充：20px；
字体系列：Helvetica；
}
#应用程序{
边界半径：4px；
填充：20px；
过渡：均为0.2s；
}
蓝先生{
背景：蓝色；
}
瑞德先生{
背景：红色；
}
格林先生{
背景：绿色；
}

{{myClass}}

如果你想应用任何声明的css类，只需绑定

类，而不是
样式，我的意思是
：class=“color”
export default {
   name: 'Header',
   data() {
   return {
   color: '#333'
    };
   }
 };

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