Vuejs：如何将变量绑定到全局CSS类？

Question

我想绑定一个变量：

<style lang='sass'>  
  .picker-item.picker-item-selected
    background-color: {{ MY_BG_COLOR }}
</style>

这显然行不通。

对于上下文，我使用的是picker from framework7，我想根据用户操作来覆盖background-color。

那我就不能真正使用usual ways to bind values for styling

是否可以为全局CSS类绑定值？

Answer 1

您不能直接做到这一点，但是可以使用“内联样式” ：

您必须将内联样式与变量绑定

<div id="app">
  <div :style="divInline">Hello</div>
</div>

您必须在数据部分中创建变量

data: {
  divInline: 'background-color:red;'
}

之后，您可以通过方法更改内联样式。

methods: {
  changeColor( color ) {
    this.divInline = 'background-color:' + color + ';'
  }
}

Example complete