css - Vuejs : How to bind a variable to global css class?

Question

我想绑定(bind)一个变量:

<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 类绑定(bind)一个值？

Answer 1

你不能直接做你想做的事，但你可以使用“内联样式”:

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

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

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

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

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

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

Example complete