title: Vuejs Multiple Style bindings?
body: <p>i have a couple of different styling that needs to apply to a text. I am trying to bind the styles using array syntax as shown in the documentation: <a href="https://v2.vuejs.org/v2/guide/class-and-style.html" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/class-and-style.html</a> but not sure what i'm doing wrong.</p>
  <p>I have created a pen for demonstration:  <a href="https://codepen.io/anon/pen/orVGNP" rel="nofollow noreferrer">https://codepen.io/anon/pen/orVGNP</a>
  The computed property style is the one i am trying to apply as well which changes the font style and font weight.</p>
  <pre><code>    &lt;div id=&quot;colorpicker&quot;&gt;
       &lt;v-layout justify-center&gt;
         &lt;v-flex class=&quot;ml-5&quot;&gt;
           &lt;chrome-picker v-model=&quot;colors&quot;&gt;&lt;/chrome-picker&gt;
         &lt;/v-flex&gt;
        &lt;v-flex&gt;
          &lt;chrome-picker v-model=&quot;colors1&quot;&gt;&lt;/chrome-picker&gt;
        &lt;/v-flex&gt;
      &lt;/v-layout&gt;
         &lt;v-container&gt;
            &lt;v-layout justify-center&gt;
                &lt;v-btn-toggle v-model=&quot;btnTgl&quot; class=&quot;ma-2&quot; multiple&gt;
            &lt;v-btn&gt;
                 &lt;v-icon&gt;format_bold&lt;/v-icon&gt;
           &lt;/v-btn&gt;
            &lt;v-btn&gt;
                &lt;v-icon&gt;format_italic&lt;/v-icon&gt;
           &lt;/v-btn&gt;
          &lt;v-btn&gt;
              &lt;v-icon&gt;format_underlined&lt;/v-icon&gt;
          &lt;/v-btn&gt;
          &lt;v-btn&gt;
             &lt;v-icon&gt;maximize&lt;/v-icon&gt;
         &lt;/v-btn&gt;
        &lt;/v-btn-toggle&gt;
        &lt;v-flex xs6 class=&quot;ml-5&quot;&gt;
         &lt;/v-flex&gt;
       &lt;/v-layout&gt;
     &lt;div v-bind:style=&quot;[{ color: colors.hex, background:colors1.hex, style 
       }]&quot; class=&quot;title&quot;&gt;
         Random Test Text!!!!!
          &lt;/div&gt;
       &lt;/v-container&gt;
      &lt;/div&gt;
  
  
           var Chrome = window.VueColor.Chrome;
  
           new Vue({
      el: '#colorpicker',
       data: {
        message: 'hello',
        toggle_one: 0,
        colors: {
         &quot;hex&quot;: &quot;#000000&quot;,
        &quot;source&quot;: &quot;hex&quot;
        },
       colors1: {
        &quot;hex&quot;: &quot;#ffffff&quot;,
      &quot;source&quot;: &quot;hex&quot;
       },
        updateValue: '',
       hex: '',
        isOpen: false,
        btnTgl: []
       },
         components: {
        'chrome-picker': Chrome
         },
       computed: {
        style() {
         let style = {};
        if (this.btnTgl.indexOf(0) &gt; -1) {
        style.fontWeight = &quot;bold&quot;;
       }
       if (this.btnTgl.indexOf(1) &gt; -1) {
      style.fontStyle = &quot;italic&quot;;
       }
    if (this.btnTgl.indexOf(2) &gt; -1) {
      style.textDecoration = &quot;underline&quot;;
    }
    if (this.btnTgl.indexOf(3) &gt; -1) {
      style.textDecoration = &quot;line-through&quot;;
    }
    return style;
     },
    }
  });
  </code></pre>
  <p>Again it's just the computed property that i'm having a hard time trying to include in the v-bind: style. thank you for the help everyone!!</p>