如何绑定由构成颜色名称、角度等的动态变量组成的线性渐变背景属性？

Question

我一直遇到这个问题。我需要能够将组件中各种元素的背景设置为动态线性渐变。（上下文正在创建一个网格背景，根据各种输入进行缩放和调整）。

我希望能够linear-gradient在函数中动态构建 CSS 背景属性，例如，这是我想要实现的简化版本：

createBackgroundString(){
    return 'linear-gradient(' + this.angle + 'deg, ' + this.color1 + ', ' + this.color2 + ')';
}

...然后将其粘贴到我的:style属性中，让 Vue 动态应用它：

v-bind:style="{ background: createBackgroundString() }"

Vue 完全拒绝（忽略）这一点，大概是因为生成的字符串太复杂，无法适应属性模板，该模板需要一个简单的字符串，如“red”或“#FF000”等。

有什么方法/黑客/解决方法可以在 Vue 中实现此目的吗？目前我不得不求助于 jQuery，这远非理想。

Answer 1

我可以让它像这样工作：

<div :style="{ backgroundImage: createBackgroundString }" />

和一个计算得出的道具：

data() {
    return {
      angle: '50',
      color1: 'red',
      color2: 'blue'
    }
  },
  computed: {
    createBackgroundString() {
      return `linear-gradient(${this.angle}deg, ${this.color1}, ${this.color2})`;
    }
  }

如果您不愿意，则不必使用反引号 (`)。我只是更喜欢它。

请注意，我已更改createBackgroundString()为createBackgroundString