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

Question

在Angular中我们可以动态设置css属性，像这样：

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

在 Vue 中，我们可以修改 :class=... 但这将我们限制为预定义的 class 选项，而 :style... 不允许我们使用 class 个名字。

有没有办法实现如上的动态CSS？或者我们是否必须对样式进行编码以使其包含所有颜色属性？

谢谢

Answer 1

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

这是一个带有示例的快速 CodeSandbox：https://codesandbox.io/s/rr80o6kq3n

这是相关代码。

<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>

Answer 2

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

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

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

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

（伪代码以便快速提供示例）

显然，可以在您需要的任何组件上使用它 - 但它应该可以解决问题，只要您有办法存储用户对 themeColor 本身的输入并将其存储在状态中。

编辑：附加选项

JSS

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

How to create Dynamic, not predefined, CSS styles in Vue (like we can in Angular)

javascript

css

vue.js

vuex