title: Change background color in vue.js based on a class name
body: <p>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 this with css but was wondering if there is a dynamic way with vue to accomplish this. my ideal outcome would be just change the class name in the markup and it will then render that associated bg color.</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="page-header__container" :style="{ background: color }"&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="page-header"&gt;
            &lt;h1 class="page-header__text"&gt;
              Page Header Lorem ipsUm
            &lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>export default {
     name: 'Header',
     data() {
     return {
     color: '#333'
      };
     }
   };
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>bg-one{
  background-color: #673AB7
  }
  bg-two{
  background-color: #7293A0
  }
  bg-three{
  background-color: #45B69C
  }
  </code></pre>