Vue 기초: style 동적 바인드

App.vue의 내용 

<template>
  <div>
    <h1>Hello Vue {{ username }}!!</h1>
    <h2 v-bind:class="textDecoration" class="text-red">line-through</h2>
    <h2 :class="isDone ? 'line-through' : 'highlight'">line-through</h2>
    <h2 :class="{ highlight: isDone, 'text-red': username === 'kj' }">
      Object형태의 동적 클래스
    </h2>
    <h2
      :class="[
        isDone ? 'line-through' : 'hightlight',
        username === 'kj' ? 'text-red' : '',
      ]"
    >
      Array 형태의 동적 클래스
    </h2>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      username: "kj",
      isDone: true,
      textDecoration: "line-through",
    };
  },
};
</script>

<style>
.highlight {
  font-weight: bold;
  background: pink;
}
.text-red {
  color: red;
}
.line-through {
  text-decoration: line-through;
}
</style>

 

기본적으로 v-bind를  이용해서 script에 명시해둔 프로퍼티를 바인딩 한다.

 

v-bind:class="바인딩할 프로퍼티" 의 형식

 

v-bind는 생략 가능

 

class="삼항연산자"  class="객체" class="배열" 의 형태로 작성도 가능하다.