[Vue] 데이터값을 바인딩해서 클래스 이름 요소에 부여하는 방법

클래스 이름으로 데이터를 바인딩하기 위해서 :을 class 앞에 부여하였다

absolute는 false이므로 class 이름으로 들어가지 않고 fixed는 true이므로 class 이름으로 들어간다

<template>
  <div :class={ absolute: absolute, fixed: fixed }></div>
</template>

<script>
export default {
  data() {
    return {
      absolute: false,
      fixed: true
    }
  }
}
</script>

 

참고로 객체에서 key와 value의 이름이 같을때 하나를 생략해줄 수 있다

<template>
  <div :class={ absolute, fixed }></div>
</template>

 

 

결과적으로 아래의 코드와 같은 결과물이 나온다

<div class="fixed"></div>