Javascript Vuejs多样式绑定？

我有两种不同的样式需要应用于文本。我试图使用文档中所示的数组语法绑定样式：但不确定我做错了什么

我创建了一支钢笔用于演示： 计算属性样式也是我尝试应用的样式，它会更改字体样式和字体重量

    <div id="colorpicker">
     <v-layout justify-center>
       <v-flex class="ml-5">
         <chrome-picker v-model="colors"></chrome-picker>
       </v-flex>
      <v-flex>
        <chrome-picker v-model="colors1"></chrome-picker>
      </v-flex>
    </v-layout>
       <v-container>
          <v-layout justify-center>
              <v-btn-toggle v-model="btnTgl" class="ma-2" multiple>
          <v-btn>
               <v-icon>format_bold</v-icon>
         </v-btn>
          <v-btn>
              <v-icon>format_italic</v-icon>
         </v-btn>
        <v-btn>
            <v-icon>format_underlined</v-icon>
        </v-btn>
        <v-btn>
           <v-icon>maximize</v-icon>
       </v-btn>
      </v-btn-toggle>
      <v-flex xs6 class="ml-5">
       </v-flex>
     </v-layout>
   <div v-bind:style="[{ color: colors.hex, background:colors1.hex, style 
     }]" class="title">
       Random Test Text!!!!!
        </div>
     </v-container>
    </div>


         var Chrome = window.VueColor.Chrome;

         new Vue({
    el: '#colorpicker',
     data: {
      message: 'hello',
      toggle_one: 0,
      colors: {
       "hex": "#000000",
      "source": "hex"
      },
     colors1: {
      "hex": "#ffffff",
    "source": "hex"
     },
      updateValue: '',
     hex: '',
      isOpen: false,
      btnTgl: []
     },
       components: {
      'chrome-picker': Chrome
       },
     computed: {
      style() {
       let style = {};
      if (this.btnTgl.indexOf(0) > -1) {
      style.fontWeight = "bold";
     }
     if (this.btnTgl.indexOf(1) > -1) {
    style.fontStyle = "italic";
     }
  if (this.btnTgl.indexOf(2) > -1) {
    style.textDecoration = "underline";
  }
  if (this.btnTgl.indexOf(3) > -1) {
    style.textDecoration = "line-through";
  }
  return style;
   },
  }
});

粗体格式
斜体格式
带下划线的格式
最大化
随机测试文本！！！！！
var Chrome=window.VueColor.Chrome；
新Vue({
el:“#颜色选择器”，
数据：{
留言：“你好”，
切换一：0，
颜色：{
“十六进制”：“000000”，
“来源”：“十六进制”
},
颜色1：{
“十六进制”：“#ffffff”，
“来源”：“十六进制”
},
updateValue:“”，
十六进制：“”，
伊索彭：错，
btnTgl:[]
},
组成部分：{
“铬选择器”：铬
},
计算：{
样式（）{
让style={}；
如果（此.btnTgl.indexOf（0）>-1）{
style.fontwweight=“bold”；
}
如果（此.btnTgl.indexOf（1）>-1）{
style.fontStyle=“italic”；
}
如果（此.btnTgl.indexOf（2）>-1）{
style.textdeaction=“下划线”；
}
如果（此.btnTgl.indexOf（3）>-1）{
style.textdeaction=“线通过”；
}
回归风格；
},
}
});

---

同样，我很难在v-bind:style中包含计算属性。谢谢大家的帮助

您需要以不同方式绑定样式对象

<div :style="appliedStyle" class="title">
    Random Test Text!!!!!
</div>

---

你没有发布@Lewis吗？我正在尝试扩展它。是的，有些逻辑与使用计算属性的逻辑相同，但当尝试将数据样式和计算样式组合在一起时，这就是我遇到问题的地方。如果它只是一个计算样式，那就不是问题了。希望我已经解释过了。在这种情况下，您需要在某个地方使用

v-bind:style=“style”

。请查看

。在这里，我将颜色和样式添加到一起，但计算的样式不起作用

var Chrome = window.VueColor.Chrome;

new Vue({
el: '#colorpicker',
data: {
    message: 'hello',
    toggle_one: 0,
    colors: {
        "hex": "#000000",
        "source": "hex"
    },
    colors1: {
        "hex": "#ffffff",
        "source": "hex"
    },
    updateValue: '',
    hex: '',
    isOpen: false,
    btnTgl: [],
    appliedStyle: {}
},
components: {
    'chrome-picker': Chrome
},
methods: {
    toggle: function() {
        this.isOpen = !this.isOpen
        this.colors.source = 'hex'
    },
    style() {
        let style = {
            'color': this.colors.hex,
            'background-color': this.colors1.hex,
        }
        if (this.btnTgl.indexOf(0) > -1) {
            style['font-weight'] = "bold";
        }
        if (this.btnTgl.indexOf(1) > -1) {
            style['font-style'] = "italic";
        }
        if (this.btnTgl.indexOf(2) > -1) {
            style['text-decoration'] = "underline";
        }
        if (this.btnTgl.indexOf(3) > -1) {
            style['text-decoration'] = "line-through";
        }

        this.appliedStyle = style;
    },
},
watch: {
    colors: function(val) {
        this.appliedStyle['color'] = val.hex;

    },
    colors1: function(val) {
        this.appliedStyle['background-color'] = val.hex;
    },
    btnTgl: function(val) {
        this.style()
    }
}
});