Vue.js

변수로 스타일 바꾸기

sdafdq 2023. 10. 5. 16:41
<template>

  <h1 :style=" {color : color, fontSize : fontSize} " @click="changeStyle">
     Hello !!!
  </h1>
</template>

<script>
  export default {
    data(){
      return {
        color : 'orange',
        fontSize : '24px'
      }
    },
    methods:{
 
      changeStyle(){
        this.color = 'royalblue',
        this.fontSize = '64px'
      }
    }
  }
</script>

이렇게 줄 수 있다.

 

근데 참고로,

key의 이름이 html 스타일 속성의 이름과 같다면,

 

  <h1 :style="{color, fontSize}" @click="changeStyle">
     Hello !!! {{ isActive }}
  </h1>

이렇게도 가능하다.

 

그걸 넘어서,

 

<template>
  <h1 :style="fontStyle" @click="changeStyle">
    Hello !!! {{ isActive }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      fontStyle: {
        color: 'orange',
        fontSize: '24px'
      }
   
    }
  },
  methods: {
    changeStyle() {
      this.fontStyle.color = 'royalblue',
        this.fontStyle.fontSize = '64px'
    }
  }
}
</script>

아예 위처럼 객체로 주는 것도 가능하다.

참고로 꼭 이름이 fontStyle일 필요는 없다.

물론 color, fontSize 이런 거는 제대로 맞춰야 하지만.

 

 

 

<template>
  <h1 :style="[fontStyle, backgroundStyle]" @click="changeStyle">
    Hello !!! {{ isActive }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      fontStyle: {
        color: 'orange',
        fontSize: '24px'
      },
      backgroundStyle: {
        backgroundColor : 'green'
      }
    }
  },
  methods: {
    changeStyle() {
      this.fontStyle.color = 'royalblue',
        this.fontStyle.fontSize = '64px'
    }
  }
}
</script>

이렇게 여러 개 주고 싶을 때는, 배열로 주면 됨.

 

 

그러니까, :style은 기본적으로 객체로 묶어져서 받는 게 기본인 듯

그냥 변수도 {color} 이런 식으로 받는 거 보면.

객체는 당연히 되고.

 

근데 거기서 여러 객체 넣을려면 배열로써 넣을 수 있도록 지원해 주는 형태인 듯.

 

 

 

<h1 :style="[fontStyles,backgroundColor,{fontStyle}]">{{ msg }}</h1>
data() {
    return {
      msg: 'Hello!!',
      fontStyles: {
        color: 'royalblue',
        fontSize: '100px'
      },
      backgroundColor : {
        backgroundColor : 'orange'
      },
      fontStyle:'italic'
    }
  }

 

'Vue.js' 카테고리의 다른 글

뷰 태그 그룹핑  (0) 2023.10.05
뷰 조건문  (0) 2023.10.05
클래스 바인딩, 템플릿 내의 조건문.  (0) 2023.10.04
watch 데이터가 변경되는 지 관찰  (0) 2023.10.04
computed  (0) 2023.10.02