Vuejs 多种样式绑定？答案

【问题标题】：Vuejs Multiple Style bindings?Vuejs 多种样式绑定？
【发布时间】：2019-07-11 15:20:55
【问题描述】：

我有几个不同的样式需要应用于文本。我正在尝试使用文档中所示的数组语法绑定样式：https://vuejs.org/v2/guide/class-and-style.html 但不确定我做错了什么。

我创建了一支笔用于演示：https://codepen.io/anon/pen/orVGNP 计算的属性样式也是我尝试应用的样式，它会更改字体样式和字体粗细。

    <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;
   },
  }
});

这只是计算属性，我很难尝试将其包含在 v-bind: 样式中。谢谢大家的帮助！！

【问题讨论】：

你没有发帖basically the same question yesterday?
@Lewis 我试图扩展它。是的，某些逻辑与使用计算属性相同，但是当尝试将数据中的样式和计算样式组合在一起时，这就是我遇到问题的地方。如果它只是一种计算样式，那将不是问题。希望我已经解释过了。
在这种情况下，您需要在某个地方使用v-bind:style="style"。
看看codepen.io/anon/pen/BgbYWo
<div v-bind:style="[{ color: colors.hex, background:colors1.hex, style }]" class="title">。在这里，我将颜色和样式一起添加，但计算出的样式不起作用

标签： javascript vuejs2 vuetify.js

【解决方案1】：

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

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

Javascript：

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()
    }
}
});

【讨论】：