Vue3 To do list 만들기 (3) class , style binding

  var  Submit = ()=>{
    todolist.value.push({
    id: Date.now(),
    sbj:todo.value,
    isdone : false,
  });

submit 함수에 isdone이라는 boolean 변수를 만들고

 

<li class="list-group-item">
  <div class="form-check">
      <input class="CheckInput"
         v-model="i.isdone"
         type="checkbox">
          <label class="checkLabel">{{i.sbj}} </label>
  </div>
</li>

checkbox에 v-model로 바인딩을 해주었다

 

사실 화요일이랍니다?

---

CSS & Class Binding

• CSS Binding

  let todoStyle={
    textDecoration:'line-through',
    color:'gray'
  }

todoStyle이라는 변수를 하나 생성, 체크박스 체크시 완료 표시와, 색상변경에 필요한 값을 넣어둔다,

          <label class="checkLabel"
          :style="i.isdone? todoStyle:{}"
          >{{i.sbj}} </label>

체크박스에 포함되는 범위인 label로 돌아와 :style (v-bind:style)중 isdone함수가 true일땐 todoStyle을, 아닐시 공백

 

이렇게 변한다

 

 

• Class Binding

Class and Style Bindings | Vue.js

<div :class="{ active: isActive }"></div>

뒤의 isActive가 true이면 active클래스가 적용이되고 아니면 active크래스가 적용되지 않는다

 

<style>
.todoStyle{
  color:red;
  text-decoration: line-through;
}
</style>

css안에 .todoStyle를 만들어주고

          <label class="checkLabel"
          :class="{todoStyle:i.isdone}"
          >{{i.sbj}} </label>

:class="{키고싶은 클래스 이름 : 조건이 true일때}" 를 통하여 작동 확인

CSS바인딩과 같은 변수명이지만 red로 클래스바인딩이 적용된걸 알 수 있다