Vue style 동적 바인딩 할당

          <label class="form-check-label" :class="{ todo: todo.completed }">
            {{ todo.subject }}
          </label>

style 바인딩 할당하는 방법이 여러 가지 있어요. 

변수에 style 관련 내용을 먼저 선언하고 조건에 따라 변하도록 할 수 있어요. todoCompletedStyle 변수를 만들고 원하는 스타일을 넣습니다.

const todoCompletedStyle = {
      textDecoration: 'line-through',
      color: 'gray'
    }
    
    
 ...
 
     return {
      todo,
      todos,
      errorMessage,
      todoCompletedStyle,
      onAdd
    }

조건에 따라 todoCompletedStyle 적용되도록 합니다. todo.completed 값이 체크되는 경우에만 적용됩니다.

<label class="form-check-label" :style="todo.completed ? todoCompletedStyle : {}">
            {{ todo.subject }}
</label>

다른 방법으로는 클래스 바인딩이 있습니다 객체를 넣을 때 key와 조건을 넣어 줄 수 있어요.

적용될 스타일을 정의합니다.

<style scoped>
.todo {
  text-decoration: line-through;
  color: gray;
}
</style>

:style 사용했던 것 대신 class 이용해서 조건에 따른 스타일을 적용합니다.

          <label class="form-check-label" :class="{ todo: todo.completed }">
            {{ todo.subject }}
          </label>

:class에서 todo 부분이 스타일 이름이고 todo.completed 부분이 조건입니다.