CSS 속성(컬러)을 VueJS 변수로 설정

CSS 속성(컬러)을 VueJS 변수로 설정

rgb(redComp, greenComp, blueComp) 포맷을 사용하여 클래스의 CSS 속성을 설정하고 싶습니다.Vuejs 컴포넌트 코드에서 이 컴포넌트를 취득하고 싶습니다.

.progress {
    color: rgb(256,0,0);
    border-radius: 0px;
}

CSS는 다음과 같이 하고 싶습니다.

.progress {
    color: rgb(redComp, greenComp, blueComp);
    border-radius: 0px;
}

여기서 redComp, greenComp 및 blueComp는 VueJS 컴포넌트의 변수입니다.어떻게 구현하면 좋을까요?

그렇게 하는 유일한 방법은 요소를 설정하는 것입니다.:styleusint 계산 속성을 지정합니다.

템플릿 부분:

<div :style="dynamicStyle"></div>

vue 파트:

/...
computed : {
    dynamicStyle() {
        return {
            // in the case of redComp, greenComp and blueComp are a vue prop or data
            color : `rgb(${this.redComp}, ${this.greenComp}, ${this.blueComp});`,
        };
    },
},
/...

javascript로 css를 조작할 수 없습니다.throrin19의 답변과 같이 요소의 스타일 속성을 직접 조작할 수 있지만, 대신 css와 클래스 목록을 사용해 보십시오.저는 수업 결합으로 해결할 수 없는 스타일 문제를 만난 적이 없고, 그 결과는 더 선언적인 스타일이 될 것이고, 효과도 더 부드러워질 것입니다.목매달기 위한 밧줄은 안 줄 거야

Vue를 통해 사후 대응 클래스 어레이를 지정할 수 있습니다. <div v-bind:class="[activeClass, errorClass]">스태틱 클래스를 같은 배열에 배치하거나 3진식을 사용할 수 있습니다.

왜 이러는 거야?한 가지 이유는 색상의 변화를 자극하기 위해서일 것이다.이 경우 가장 좋은 방법은 css 이행입니다.코드는 선언적으로 유지됩니다.자세한 내용은 여기를 참조하십시오.

나도 비슷한 문제에 직면했다.오브젝트 vue의 데이터를 기반으로 한 배경색이 필요합니다.

이게 제 접근 방식이었군요

new Vue({
  el: "#app",
  
  data: {
    getQuestionAnswers: [
        {
        name: 'foo',
        color: {
            red: '0',
            green: '0',
            blue: '0'
        }
      },
      {
        name: 'bar',
        color: {
        red: '127',
        green: '127',
        blue: '127'
        }
        
      },
      {
        name: 'baz',
        color: {
        red: '255',
        green: '255',
        blue: '255'
        }
      }
    ]
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color: red;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.red {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div 
    
    v-for="(group) in getQuestionAnswers"
    
  
  >
  <div :style="{ 'background-color': `rgb(${group.color.red}, ${group.color.green}, ${group.color.blue})`}">
        {{ group.name }}  
  </div>

  </div>
</div>

언급URL : https://stackoverflow.com/questions/44964003/set-a-css-property-color-to-a-vuejs-variable