색상 이름, 각도 등을 구성하는 동적 변수로 구성된 선형 그라데이션 배경 속성을 어떻게 바인딩할 수 있는가?

색상 이름, 각도 등을 구성하는 동적 변수로 구성된 선형 그라데이션 배경 속성을 어떻게 바인딩할 수 있는가?

이 문제에 자꾸 부딪친다.내 컴포넌트의 다양한 원소의 배경을 동적 선형 구배로 설정할 수 있어야 한다.(문맥은 다양한 입력에 따라 스케일링 및 조정되는 그리드 배경을 만드는 것이다.)

나는 내 능력을 키울 수 있기를 원한다.linear-gradientCSS 백그라운드 속성은 함수에서 동적으로, 예를 들어, 내가 달성하고자 하는 것의 간단한 버전은 다음과 같다.

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

그리고 그걸 내 몸에 박아넣고:styleVue를 동적으로 적용하기 위한 속성:

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

Vue는 결과적인 문자열이 '빨간색'이나 '#' 같은 단순한 문자열을 기대하는 속성 템플릿에 맞추기에는 너무 복잡하기 때문에 이것을 노골적으로 거부한다.FF000' 등

Vue에서 이를 달성할 수 있는 방법이 있는가?지금은 이상과는 거리가 먼 jQuery에 의지해야 한다.

이렇게 작동시킬 수 있어

<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

참조URL: https://stackoverflow.com/questions/59552974/how-can-i-bind-a-linear-gradient-background-property-made-up-of-dynamic-variable