Vue.js) 태그 스타일에 변수 적용하기(CSS에 변수 적용) Vue2, Vue3

내가 하고싶은것은 넓이가 유동적으로 변하는 값에 따라 높이를 맞추고 싶었다. 

그냥 간단히 말해 vue단에서 선언한 변수를 css에 적용하고 싶었다. 

 

여러가지 구글링 했을때는 css변수 사용해서 :root에 변수를 선언하라고 되있는데, 나는 css에서 새로운 변수를 만드는게 아니라 자바스크립트 단에서 만든 변수를 사용하고 싶었다. 방법은 생각보다 간단!

 

 

Vue3

1) 변수 선언

data() {
    return {
     hhhhh : '',
    };
  },

 

2) 변수에 값 넣기

mounted(){
    this.hhhhh = 50 * 10 + "px";
  },

 

3) 변수를 style에 적용

<div :class="{'height': this.hhhhh}" style=" background-color: aqua;">변동css</div>

<div :style="{'height': this.hhhhh}" style=" background-color: aqua;">변동css</div>

 

---

 

Vue2

Vue2는 3과 적용 방법이 살짝 다르다.

<div v-bind:style="{ 'height': hhhhh, 'width': '100%'}"></div>