Vue.js~ToDo리스트④~

올 가을은, 전회 붙인 삭제 기능에 완료했을 때에 가로선이 들어가도록(듯이) 실장해 가고 싶습니다.

HTML 구현은 다음과 같습니다.

index.html

<ul>
      <li v-for="(todo,index) in todos">
        <input type="checkbox" v-model="todo.isDone"> 
        <span v-bind:class="{done: todo.isDone}">{{index}}:{{ todo.title }}</span>
        <span class="delete-button" v-on:click="deleteItem(index)">✗</span>
      </li>
    </ul>

이번에는 완료 체크를 하기 쉽도록, 체크 박스를 붙이고 싶습니다.
또한 v-model과 tot.isDone을 ​​연결해 둡니다.
이번에는 v-vind라는 지시문을 사용합니다.
v-bind:class에 객체를 전달하여 움직임을 줍니다.
이번에는 데이터에 따라 움직임을 바꾸고 싶기 때문에 span 태그를 사용하여 Done 때의 움직임을 붙여 갑니다.

여기서 js 측의 구현을 살펴 보겠습니다.

index.js

newItem: '',
    todos:  [{
      title: 'title1',
      isDone:false},{
        title:'title2',
        isDone:false},{
          title:'title3',
          isDone:true
        }]
  },
  methods: {
    UPItem: function() {
      const item = {
        title:this.newItem,
        isDone:false
      };
      this.todos.push(item);
      this.newItem = '';
    },

기존 데이터를 만들어 갑니다.
false▶올바르지 않음 true▶올바른 값입니다.
이번 기술 내용은, 태스크 1, 2는 완료하고 있지 않다, 태스크 3은 완료하고 있다고 느낍니다.
브라우저상에서는 이런 느낌이 됩니다.



방법을 살펴 보겠습니다! ! 이것은 추가적인 경우의 처리가 됩니다.
변수를 선언하고 추가되어도 완료 상태가 아니도록 isDone : false를 추가합니다! !
이제 추가부터 완료까지 기능을 구현할 수있었습니다! ! 😊