Javascript 如何在Vue中创建动态而非预定义的CSS样式（就像我们在Angular中所做的那样）

在Angular中，我们可以动态设置css属性，如下所示：

<style ng-if="color">
.theme-color { color: {{color}}; }
.theme-background-color { background-color: {{color}}; }
.theme-border-color { border-color: {{color}}; }
</style>

.theme颜色{color:{{color}}；}
.theme背景色{背景色：{{color}；}
.theme边框颜色{边框颜色：{{color}；}

在Vue中，我们可以修改：class=。。。但这限制了我们使用预定义的类选项，而且：样式。。。这不允许我们使用类名

有没有一种方法可以像上面那样实现动态CSS？还是我们必须对样式进行编码，使其包含所有颜色属性

---

谢谢

如果您不需要Internet Explorer支持，可以使用CSS变量

下面是一个带有示例的快速代码沙盒：

这是相关代码

<template>
  <div class="foo">
    <div class="bar">Hello World</div>
  </div>
</template>

<style scoped>
.foo {
  --theme-color: black;
}

.bar {
  font-weight: bold;
  transition: color 0.2s;
  color: var(--theme-color);
}
</style>

<script>
export default {
  data () {
    return {
      hue: 0,
    }
  },

  watch: {
    hue (hue) {
      this.$el.style.setProperty(
        "--theme-color",
        `hsl(${hue % 360}, 100%, 50%)`,
      )
    },
  },

  mounted() {
    window.setInterval(() => {
      this.hue += 20
    }, 500)
  },
}
</script>

你好，世界
傅先生{
--主题颜色：黑色；
}
.酒吧{
字体大小：粗体；
过渡：颜色0.2s；
颜色：var（--主题颜色）；
}
导出默认值{
数据（）{
返回{
色调：0，
}
},
观察：{
色调（色调）{
此.$el.style.setProperty(
“--主题颜色”，
`hsl（${hue%360}，100%，50%）`，
)
},
},
安装的（）{
window.setInterval（（）=>{
这个色相+=20
}, 500)
},
}

假设这有某种用户颜色选择干预；我会将用户选择的颜色存储在状态中，这样就可以全局访问

然后在组件中，您可以执行以下操作

<app :style="themeStyles"></app>

export default {
  computed: {
    themeStyles () {
      return {
        color: store.state.themeColor,
        backgroundColor: store.state.themeColor,
        borderColor: store.state.themeColor
      }
    }
  }
}

---

您需要支持哪些浏览器？你可以用CSS变量来处理它。MSFT是我二十多年来最大的客户。我很乐意忽略它们——并且不支持msft堆栈也就是说，我更喜欢在Vue隐喻中工作。但是谢谢你的好建议。：）它不能在IE中工作，也不能像看上去那样顺利工作。这完全依赖于级联。一旦孩子身上有了颜色，那就是那里的新颜色。@BillCriswell你的意思是它不会赢得战争吗？如果是这样，您可以添加一个！重要的。。我明白你的意思了，不过我会再想一想。您可能会生成类并在computed中分配它们的规则，这与上面列出的方法基本相同，但语法/结构不同。