Vue - html 요소를 동적으로 스타일링할 수 있습니까?

Vue - html 요소를 동적으로 스타일링할 수 있습니까?

쇼트 버전:에서data()특정 색상을 정의합니다.나는 그 것을 원한다.html- 이 중 하나의 색상에 대한 배경은 다음과 같습니다.switch진술.

롱 버전:에서data(), 다음과 같은 코드가 있습니다.

data() {
    return {
      item: {},
      color1: '',
      color2: '',
    };
  },

인마이created()백엔드에서 아이템을 가져옵니다.또한, 저는 다음 코드를 작성하여 컬러를 평가하였습니다.html- 섹션:

switch (this.item.itemType) {
    case 'car': this.color1 = '#39ac39'; this.color2 = '#00ff00'; break;
    case 'bus': this.color1 = '#3333ff'; this.color2 = '#1a75ff'; break;
    case 'plane': this.color1 = '#ff66cc'; this.color2 = '#ffb3e6'; break;

    default: this.color1 = '#'; this.color2 = '#';
}

인마이style전체 앱의 배경을 스타일링하고 싶다.html-tag)를 사용하여 다음과 같이 스타일링합니다.

<style>
html {
  background-color: linear-gradient(to bottom, color1, color2);
}
</style>

이게 Vue에서 가능합니까?

스크립트 내의 데이터를 스타일태그 또는 스타일시트 파일의 CSS 규칙에 바인드할 수 없습니다.이 문제를 해결하는 최선의 방법은 메인 CSS 스타일파일에 CSS 변수를 정의하고 스크립트를 사용하여 변경하는 것입니다.

:root {
  --color1:#000;
 --color2:#fff;
}

html {
  background-color: linear-gradient(to bottom,var(--color1), var(--color2));
}

스크립트:

switch (this.item.itemType) {
    case 'car': this.color1 = '#39ac39'; this.color2 = '#00ff00'; break;
    case 'bus': this.color1 = '#3333ff'; this.color2 = '#1a75ff'; break;
    case 'plane': this.color1 = '#ff66cc'; this.color2 = '#ffb3e6'; break;

    default: this.color1 = '#'; this.color2 = '#';
}

document.documentElement.style.setProperty("--color1", this.color1)

document.documentElement.style.setProperty("--color2", this.color2)

스타일 태그를 직접 조작하거나 추가할 수 없지만style트릭을 사용하여 동적으로 생성된 스타일시트를 추가할 수 있습니다.

v-html을 사용하여 동적 스타일을 생성할 수 있습니다.

<span v-html="style"></span>

계산된 속성에서 가져온 것입니다.

computed: {
    style() {
      return (
        "<style> html { background-image: linear-gradient(to bottom, " +
        this.color1 +
        ", " +
        this.color2 +
        "); }</style>"
      );
    }
  }

단, 이것은 컴포넌트가 트리 뷰에 있는 경우에만 존재하며, 일단 삭제되면 스타일도 변경됩니다.

여기 작업 예가 있습니다.

언급URL : https://stackoverflow.com/questions/61228806/vue-is-it-possible-to-style-the-html-element-dynamically