[Vue] 스타일 데이터 바인딩시 케이스스타일 문제 해결하기

Vue에서 데이터를 바인딩할때는 대쉬 케이스(dash case) - 기호를 가진 데이터를 사용할 수 없다. 대신 카멜 케이스(camel case)를 사용하면 자동으로 스타일 속성에 알맞게 변경이 된다. 또는 대쉬 케이스를 따옴표로 묶어주면 사용이 가능하다.

 

1. camel case 사용

<template>
  <div :style=“{ zIndex: zIndex }”></div>
</template>

<script>
export default {
  data() {
    return {
      zIndex: 0
    }
  }
}
</script>

2. 따옴표로 대쉬 케이스를 묶어준 후 사용

<template>
  <div :style=“{ 'z-index': zIndex }”></div>
</template>

<script>
export default {
  data() {
    return {
      zIndex: 0
    }
  }
}
</script>

 

결과

<div style="z-index: 0"></div>