[Vue] Vue에서 인라인 style 다루는 방법

 

안녕하세요. 혀코입니다.

이번 시간에는 Vue에서 인라인 style 다루는 방법에 대해서 알아보겠습니다.

 

<template>
  <h1>Style Attribute</h1>
  <p v-bind:style="{color: 'red', fontSize: '30px' }">{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

 

 

인라인 style을 사용할 때는 key, value 쌍으로 이뤄진 객체를 사용합니다. 이때, key 값으로 camelCase를 주로 사용하며, kebab-case를 사용할 때는 'font-size'와 같이 따움표를 사용합니다. 그리고 value 부분은 기본적으로 따움표를 사용합니다.

그리고 class attribute를 다룰때 처럼, script에서 객체 데이터를 만들어 style에 객체명만 지정해서 사용할 수 있습니다.

<template>
  <h1>Style Attribute</h1>
  <p v-bind:style="styleObject">{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!',
      styleObject: {
        color: 'red',
        'font-size': '30px'
      }
    }
  }
}
</script>

 

그리고, methods를 사용해서 styleObject의 값을 변경하면 스타일을 동적으로 변경해 줄 수 있습니다.

 

<template>
  <h1>Style Attribute</h1>
  <p v-bind:style="styleObject">{{ message }}</p>
  <button @click="change">Change</button>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!',
      styleObject: {
        color: 'red',
        fontSize: '30px'
      }
    }
  },
  methods: {
    change() {
      this.styleObject.color = 'blue',
      this.styleObject.fontSize = '50px'
    }
  }
}
</script>

 

또한 여러개의 스타일 객체를 사용할 때는 배열의 형태로 사용할 수 있습니다.

<template>
  <h1>Style Attribute</h1>
  <p v-bind:style="[fontStyle, bgStyle]">{{ message }}</p>
  <button @click="change">Change</button>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!',
      fontStyle: {
        color: 'red',
        fontSize: '30px'
      },
      bgStyle: {
        backgroundColor: 'yellow'
      }
    }
  },
  methods: {
    change() {
      this.fontStyle.color = 'blue',
      this.fontStyle.fontSize = '50px'
      this.bgStyle.backgroundColor = 'orange'
    }
  }
}
</script>

 

이렇게 Vue에서 인라인 style 다루는 방법에 대해서 알아봤습니다.

해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다.

감사합니다. :)